背景位置-y | background-position-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 | [ 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）
