翻译正在进行中。

概述

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%
适用元素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
是否适用于 CSS 动画yes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
正规顺序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 | <percentage> | <length> ] | [ left | center | right | <percentage> | <length> ] [ top | center | bottom | <percentage> | <length> ] | [ center | [ left | right ] [ <percentage> | <length> ]? ] && [ center | [ top | bottom ] [ <percentage> | <length> ]? ]]

例子

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

There should be three yellow elements, each with a star in a different position. The final rectangle has two background images, each with a different background-position.

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

参见

 

 

 

文档标签和贡献者

 最后编辑者: TomIsion,