CSS-背景位置-y | background-position-y

background-position-y 屬性用於設置初始狀態時背景圖片在垂直方向上的位置,這個位置相對於通過 background-origin定義的背景層的原點進行定位. 需要獲得更多的信息可以查看background-position屬性,這個屬性已經得到了長久且廣泛的支持.

注意:background-position-y 設定的值會被 background或者是background-position的簡寫屬性的background-position-x後面的值所覆蓋.

/* Keyword values */
background-position-y: top;
background-position-y: center;
background-position-y: bottom;

/* <percentage> values */
background-position-y: 25%;

/* <length> values */
background-position-y: 0px;
background-position-y: 1cm;
background-position-y: 8em;

/* side-relative values */
background-position-y: bottom 3px;
background-position-y: bottom 10%;

/* Multiple values */
background-position-y: 0px, center;

/* Global values */
background-position-y: inherit;
background-position-y: initial;
background-position-y: unset;

初始值	top
適用元素	all elements
是否是繼承屬性	no
Percentages	refer to height of background positioning area minus height of background image
適用媒體	visual
計算值	A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
Animation type	discrete
正規順序	the unique non-ambiguous order defined by the formal grammar

語法

值

top將背景圖片的上邊界與背景位置層的上邊界對齊.

center將背景圖片垂直方向上的中線與背景位置層的垂直方向中線對齊.bottom將背景圖片的下邊界與背景位置層的下邊界對齊.

<length> 通過<length>直接設定具體的數值,該數值定義了背景圖片垂直方向的上邊界相對於當前背景層(content-box/padding-box/border-box)的垂直方向上邊界的偏移量,默認情況下是padding-box.

<percentage>通過<percentage>百分比的設置,該百分比定義了背景圖片垂直方向的上邊界相對於當前背景層的垂直方向上邊界的偏移百分比,從而得到偏移量,該偏移量的計算方法是:(當前背景層的高-背景圖片的高) * 百分比,高度差和百分比都保留符號。

正式語法

[ center | [ top | bottom | y-start | y-end ]? <length-percentage>? ]#where 
<length-percentage> = <length> | <percentage>

規範

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 4The definition of 'background-position-y' in that specification.	Editor's Draft	Initial specification of longhand subproperties of background-position, to match longstanding implementations.

瀏覽器兼容性

Feature	Chrome	Firefox	Edge	Internet Explorer	Opera	Safari
Basic Support	(Yes)	49.0	12	6	(Yes)	(Yes)
Two-value syntax (support for offsets from any edge)	(No)	49.0	12	9.0	(No)	(No)

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic Support	(Yes)	(Yes)	(Yes)	49.0	?	?	?
Two-value syntax (support for offsets from any edge)	(No)	(No)	(Yes)	49.0	?	(No)	(No)

另見

• background-position

• background-position-x

• background-position-inline

• background-position-block

• 多重背景（Multiple backgrounds）