这篇翻译不完整。请帮忙从英语翻译这篇文章

background-position 为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin 定义的位置图层的。

语法

/* Keyword values */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* <percentage> values */
background-position: 25% 75%;

/* <length> values */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* Multiple images */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

/* Global values */
background-position: inherit;
background-position: initial;
background-position: unset; 

background-position 属性被指定为一个或多个 <position> 值,用逗号隔开。

  • 关键字 center,用来居中背景图片。
  • 关键字 top, left, bottom, right 中的一个。用来指定把这个项目(原文为 item)放在哪一个边缘。另一个维度被设置成 50%,所以这个项目(原文为 item)被放在指定边缘的中间位置。
  • <length><percentage>。指定相对于左边缘的 x 坐标,y 坐标被设置成 50%。
  • 如果一个值是  top 或  bottom,那么另一个值不应该是 topbottom
  • 如果一个值是  left 或   right,那么另一个值不应该是 leftright
<position>
  一个 <position> 定义一组 x/y 坐标(相对于一个元素盒子模型的边缘),来放置这个项目(原文为 item)。它可以被定义为一个值或者两个值。如果被定义为两个值,那么第一个值代表水平位置,第二个代表垂直垂直位置。如果只指定一个值,那么第二个值默认为 center

一个值的语法: 这个值可以是:

两个值的语法: 一个定义 x 坐标,另一个定义 y 坐标。每个值可以是:

  • 关键字 top, left, bottom, right 中的一个。 如果这里给出 leftright,那么这个值定义 x 轴位置,另一个值定义 y 轴位置。如果这里给出 top 或  bottom,那么这个值定义 y 轴位置,另一个值定义 x 轴位置。
  • <length><percentage>。如果另一个值是  left 或  right,那么这个值(指 <length><percentage>)定义相对于上边缘的 y 轴位置。 如果两个值都是 <length><percentage>,那么第一个值定义 x 轴位置,第二个定义 y 轴位置。

注意:

也就是说,top topleft left 是无效的。

 

语法规范

<bg-position>#

where
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]

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

例子

下面三个例子使用 background 来创建一个包含一个星星的黄色长方形元素。每个例子中,星星的位置是不一样的。第三个例子阐明了如何

为两个不同的背景图片指定位置。

HTML 内容

<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>
 
 
 

CSS 内容

/* 被所有 div 共享 */
div {
    background-color: #FFEE99;
    background-repeat: no-repeat;
    width: 300px;
    height: 80px;
    margin-bottom: 12px;
}


/* 这些例子使用 `background` 缩写 */
.exampleone {
    background: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exampletwo {
    background: url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif") #FFEE99 3em 50% no-repeat;
}

/*
多背景图片:每个图片依次和相应的 `background-position` 匹配
*/
.examplethree {
    background-image:    url("https://developer.mozilla.org/samples/cssref/images/startransparent.gif"), 
                         url("https://mdn.mozillademos.org/files/7693/catfront.png");
    background-position: 0px 0px,
                         center;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

结果

规范

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
background-position
Candidate Recommendation Added support for multiple backgrounds, the four-value syntax and modified the percentage definition to match implementations.
CSS Level 2 (Revision 1)
background-position
Recommendation Allows for the mix of keyword values and <length> and <percentage> values.
CSS Level 1
background-position
Recommendation  

初始值0% 0%
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性
Percentagesrefer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
适用媒体visual
计算值a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a length), otherwise as a percentage
Animation typerepeatable list of simple list of length, percentage, or calc
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Multiple backgroundsChrome Full support 1Edge Full support 12Firefox Full support 3.6IE Full support 9Opera Full support 10.5Safari Full support 1.3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
Four-value syntax (support for offsets from any edge)Chrome Full support 25Edge Full support 12Firefox Full support 13IE Full support 9Opera Full support 10.5Safari Full support 7WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 14Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

参见