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）