MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

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
是否是继承属性
Percentagesrefer 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 typediscrete
正规顺序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> 百分比的设置,该百分比定义了背景图片垂直方向的上边界相对于当前背景层(content-box/padding-box/border-box)的垂直方向上边界的偏移百分比,从而得到偏移量,该偏移量的计算方法是:(当前背景层的高-背景图片的高) * 百分比,高度差和百分比都保留符号,例如(100px - 200px) * (-10%) = 10px那么偏移量就是正的10px(向下为正方向),默认情况下是padding-box.

Formal syntax

[ center | [ top | bottom | y-start | y-end ]? <length-percentage>? ]#

where
<length-percentage> = <length> | <percentage>

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 4
background-position-y
Editor's Draft Initial specification of longhand subproperties of background-position, to match longstanding implementations.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support(Yes)1249.06(Yes)(Yes)
Two-value syntax (support for offsets from any edge)No1249.09.0NoNo
FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support(Yes)(Yes)(Yes)49.0???
Two-value syntax (support for offsets from any edge)NoNo(Yes)49.0?NoNo

See also

文档标签和贡献者

 此页面的贡献者: AugustEchoStone
 最后编辑者: AugustEchoStone,