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>

规范

规范 状态 说明
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.

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge Full support 12Firefox Full support 49IE Full support 6Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 49Opera Android ? Safari iOS ? Samsung Internet Android Full support Yes
Two-value syntax (support for offsets from any edge)Chrome No support NoEdge Full support 12Firefox Full support 49IE Full support 9Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile Full support YesFirefox Android Full support 49Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown

另见

文档标签和贡献者

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