background-position

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
  • +50px(将图片的左边界对齐容器的中线)
  • 0px(图片的左边界与容器左边界重合)
  • -100px(将图片相对容器左移100px,这意味着图片中部的100px内容将出现在容器中)
  • -200px(将图片相对容器左移200px,这意味着图片右部分的100px内容将出现在容器中)
  • -250px(将图片相对容器左移250px,这意味着图片的右边界对齐容器的中线)

    另外需要注意,如果背景图片的大小和容器一样,那设置百分比的值将永远无效,因为“容器和图片的差”为0(图片永远填满容器,并且图片的相对位置和容器的相对位置永远重合)。在这种情况下,需要为偏移使用绝对值(例如px)。

<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 是无效的。

至于百分比:

百分比值的偏移指定图片的相对位置和容器的相对位置重合。值0%代表图片的左边界(或上边界)和容器的左边界(上边界)重合。值100%代表图片的右边界(或下边界)和容器的右边界(或下边界)重合。值50%则代表图片的中点和容器的中点重合。

当指定百分比值的时候,实际上执行了以下的计算公式(该公式可以用数学方式定义图片和容器相对位置重合):

(container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)


使用X坐标来举个例子,假设有一个300px宽的图片,将这个图片使用到一个100px宽的容器中,并且将background-size设置成自动:

100px - 300px = -200px (容器和图片的宽度差)

当对background-position设置值依次为-25%,0%,50%,100%,125%,得到图片相对容器的偏移值为:

-200px * -25% = 50px
-200px * 0% = 0px
-200px * 50% = -100px
-200px * 100% = -200px
-200px * 125% = -250px


对于这些例子中设置的偏移,图片相对容器真实的偏移值就是:

语法规范

<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
计算值as each of the properties of the shorthand:
  • background-position-x: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
  • background-position-y: A list, each item consisting of: an offset given as a combination of an absolute length and a percentage, plus an origin keyword
Animation typerepeatable list of simple list of length, percentage, or calc

浏览器兼容性

BCD tables only load in the browser

参见