背景图片位置 | 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>值，用逗号分隔。

值

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

1值语法：值可能是：

• 关键字值center，它是图像的中心。

• 关键字值中的一个top，left，bottom，right。这指定了放置物品的边缘。另一个尺寸被设置为50％，因此该项目被放置在指定边缘的中间。

• a<length>或<percentage>。这指定相对于左边缘的X坐标，Y坐标设置为50％。

2值语法：一个值定义X，另一个定义Y.每个值可以是：

• 关键字值中的一个top，left，bottom，right。如果left或者right在这里给出，那么这个定义了X，而另一个给定的值定义了Y.如果top或者bottom给定了，那么这个定义了Y而另一个定义了X.

• <length>或<percentage>。如果另一个值是leftor right，那么这个值定义Y，相对于上边缘。如果另一个值是topor bottom，那么这个值定义X，相对于左边缘。如果两个值是<length>或<percentage>值，那么第一个定义X和第二个Y.

请注意：

• 如果一个值是top或bottom，那么另一个值可能不是top或bottom。

• 如果一个值是left或right，那么另一个值可能不是left或right。

这意味着“ top top"和left right”是无效的。

正式语法

<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创建一个包含星形图像的黄色矩形元素。在每个例子中，星形图像处于不同的位置。另外，第三个例子说明了如何为一个元素中的两个不同的背景图像指定位置。

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://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("https://mdn.mozillademos.org/files/11987/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://mdn.mozillademos.org/files/11987/startransparent.gif"), 
                       url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-position: 0px 0px,
                       center;
}

结果

规范

浏览器兼容性