此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
background-position-y
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年9月.
* Some parts of this feature may have varying levels of support.
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;| 初始值 | 0% |
|---|---|
| 适用元素 | 所有元素. It also applies to::first-letter and::first-line. |
| 是否是继承属性 | 否 |
| Percentages | refer to height of background positioning area minus height of background image |
| 计算值 | A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword |
| 动画类型 | a repeatable list |
语法
合法值
top将背景图片的上边界与背景位置层的上边界对齐。
center将背景图片垂直方向上的中线与背景位置层的垂直方向中线对齐。
bottom将背景图片的下边界与背景位置层的下边界对齐。
<length>通过
<length>直接设定具体的数值，该数值定义了背景图片垂直方向的上边界相对于当前背景层 (content-box/padding-box/border-box) 的垂直方向上边界的偏移量，默认情况下是 padding-box.<percentage>通过
<percentage>百分比的设置，该百分比定义了背景图片垂直方向的上边界相对于当前背景层 (content-box/padding-box/border-box) 的垂直方向上边界的偏移百分比，从而得到偏移量，该偏移量的计算方法是:(当前背景层的高 - 背景图片的高) * 百分比，高度差和百分比都保留符号，例如 (100px - 200px) * (-10%) = 10px 那么偏移量就是正的 10px(向下为正方向),默认情况下是 padding-box.
Formal syntax
background-position-y =
[center|[[top|bottom|y-start|y-end]?<length-percentage>?]!]#
<length-percentage> =
<length>|
<percentage>
规范
| Specification |
|---|
| CSS Backgrounds Module Level 4 # background-position-longhands |