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

概述

background-position 指定背景图片的初始位置。

对于每一个被设定的背景图片来说,background-position 这个 CSS 属性设置了一个初始位置。 这个初始位置是相对于以 background-origin 定义的背景位置图层(padding-box|border-box|content-box)来说的。

注意: If the value of this property is not set in a background shorthand property that is applied to the element after the background-position CSS property, the value of this property is then reset to its initial value by the shorthand property.
初始值 0% 0%
适用于  所有元素. 同样适用于 ::first-letter 和::first-line.
是否继承
百分比 参照尺寸为背景图片定位区域的大小减去背景图片的大小; 第一个值为元素在水平方向上的偏移量,第二个元素为元素在竖直方向上的偏移量
Media visual
Computed value 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 type a repeatable list of , a simple list of , a lengthpercentage or calc();
Canonical order the unique non-ambiguous order defined by the formal grammar

语法

background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;
background-position: 0px 0px, center;
 
 
 
 
 
 
 

取值

<position>
是一个 <position>,一到四个距元素边界2D位置的数值。可以给出相对值或绝对值。注意位置可以设置在盒模型外。

取值(具体)

<percentage> <percentage>
With a value pair of '0% 0%', the upper left corner of the image is aligned with the upper left corner of the box's padding edge. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of padding area. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding area.
<length> <length>
With a value pair of '2cm 1cm', the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the padding area.
top left and left top
Same as '0% 0%'.
top, top center, and center top
Same as '50% 0%'.
right top and top right
Same as '100% 0%'.
left, left center, and center left
Same as '0% 50%'.
center and center center
Same as '50% 50%'.
right, right center, and center right
Same as '100% 50%'.
bottom left and left bottom
Same as '0% 100%'.
bottom, bottom center, and center bottom
Same as '50% 100%'.
bottom right and right bottom
Same as '100% 100%'.

如果只有一个值被指定,则这个值就会默认设置背景图片位置中的水平方向,与此同时垂直方向的默认值被设置成50%。在关键词、百分比和数值混合指定的情况下,关键词 left 和 right 只能被指定水平方向的位置(第一个值)同时 top 和 bottom 只能被指定指定为垂直方向的值(第二个值)。同样,负数值是允许指定的。

形式化语法

<position>#

where
<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>

例子

使用 CSS background 和多个图片的例子

下面的例子是用background创建的黄色的三个矩形元素,并且每个元素在不同的位置都有一个星形图片。此外,第三个元素有两个背景图片,并分别设置了这两个背景图片的位置。

HTML 内容

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

CSS 内容

/* Shared among all DIVS */
div {
    background-color: #FFEE99;
    background-repeat: no-repeat;
    width: 300px;
    height: 80px;
    margin-bottom: 12px;
}

/* background-position examples */

/* These examples use the background shorthand CSS property */
.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;
}

/*
Multiple background images: Each image is matched with the
corresponding position style, from first specified to last.
*/
.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  

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0 (85)
Multiple backgrounds 1.0 3.6 (1.9.2) 9.0 10.5 1.3 (312)
Four-value syntax (support for offsets from any edge) 25 (maybe earlier) 13.0 (13.0) 9.0 10.5 7.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) 1.0 (1) (Yes) (Yes) (Yes)
Multiple backgrounds ? 1.0 (1.9.2) ? ? ?
Four-value syntax (support for offsets from any edge) 未实现 13.0 (13.0) ? ? iOS 7.0

参见

 

 

 

文档标签和贡献者

 最后编辑者: zhangailing,