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
- 多重背景（Multiple backgrounds）