background-position

概述

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

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

语法

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;
}

输出

规范

浏览器兼容性

参见

• Multiple backgrounds