Chaguo cha background-position-y cha CSS
- ukumbusho wa mifupi background-position-x
- Mwaka wa mbele background-repeat
定义和用法
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; }
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; }
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%; }
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; }
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.
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
- ukumbusho wa mifupi background-position-x
- Mwaka wa mbele background-repeat