Chaguo cha background-position-y cha CSS

定义和用法

background-position-y 属性用于设置背景图像在 y 轴上的位置。

提示:默认情况下,背景图像会被放置在元素的左上角,并在垂直和水平方向上重复。

Mfano

Mfano 1

Kutoka kwa kuingia picha ya mabara kwenye y axis:

div {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-position-y: center;
}

Tafuta tena

Mfano 2

Kutoka kwa kuingia picha ya mabara kwenye juu:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: bottom;
}

Tafuta tena

Mifano 3

Jinsi ya kutumia pondo kumaliza kinalesha kuu kwenye y:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 50%;
}

Tafuta tena

Mifano 4

Jinsi ya kutumia pikseli kumaliza kinalesha kuu kwenye y:

body {
  background-image: url('w3css.gif');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-y: 80px;
}

Tafuta tena

Inayotumika kwa CSS

background-position-y: value;

Chaguo cha maelezo

Chaguo Maelezo
top Kumaliza kinalesha kuu kwenye kinalesha ya y.
bottom Kumaliza kinalesha chini kwenye kinalesha ya y.
center Kumaliza kinalesha kuu kwenye kinalesha ya y.
y%

Kinalesha kuu ya y kinalesha kinahusu 0%, kinalesha chini kinahusu 100%.

Kiwango cha faida cha pondo kinahusu ukubwa wa kinalesha na kinalesha kuu.

ypos

Kiwango cha utanguliko kutoka kinalesha kuu.

Makampuni yanaweza kuwa pikseli (kama 0px) au mengine Viyani cha CSS.

ypos offset

Ujumbe wa vifaa, inafaa kuwa kinalesha na Safari.

  • ypos Kumaliza kwa kinalesha kuu na kinalesha chini.
  • offset Inasababisha kiwango cha utanguliko wa kinalesha na yoyote inayotumiwa kwenye yoyote inayotumiwa kwenye mabara ya mabara.

Makampuni yanaweza kuwa pikseli au mengine Viyani cha CSS.

initial Kumaliza kwa chaguo cha kuzingatia. Angalia initial.
inherit Kumaliza kwa ukweli wa kinalesha yake kuu. Angalia inherit.

Mafunzo ya mengine

Chaguo cha kuzingatia: 0%
Kumuzaa: Hakuna
Kufanya matukio: Inafaa kuona:Maelezo ya matukio ya hali ya hali.
Tengeneza: CSS3
Inayotumika kwa JavaScript: object.style.backgroundPositionY="center"

Mawasiliano ya kinalesha

Mifano ya kinalesha inasema tabia ya kinalesha ya kwanza ya kufaa kinalesha hii.

Chrome Edge Firefox Safari Opera
Ujumbe wa kipimo 1.0 12.0 49.0 1.0 15.0
Ujumbe wa vifaa Hakuna mawasiliano Hakuna mawasiliano 49.0 15.4 Hakuna mawasiliano

Vipindi vya huzina

Mafunzo:Mabaki ya msingi cha CSS

Maelezo ya CSS:background-image ya maelezo

Maelezo ya CSS:background-position ya maelezo

Maelezo ya CSS:background-position-x ya maelezo

Maelezo ya HTML DOM:backgroundPosition ya maelezo