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
Two-value syntax (support for offsets from any edge)	(No)			9.0

	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
					?

另見

• background-position

• background-position-x

• background-position-inline

• background-position-block

• 多重背景（Multiple backgrounds）