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`

语法：

background-position：left | center | right | top | bottom |<length>| <percentage>

关键字 center，用来居中背景图片。
关键字 top, left, bottom, right 中的一个。用来指定把这个项目（原文为 item）放在哪一个边缘。另一个维度被设置成 50%，所以这个项目（原文为 item）被放在指定边缘的中间位置。
<length>或<percentage>。指定相对于左边缘的 x 坐标，y 坐标被设置成 50%。
如果一个值是 top 或 bottom，那么另一个值不应该是 top 或 bottom。
如果一个值是 left 或 right，那么另一个值不应该是 left 或 right 。
+50px（将图片的左边界对齐容器的中线）
0px（图片的左边界与容器左边界重合）
-100px（将图片相对容器左移100px，这意味着图片中部的100px内容将出现在容器中）
-200px（将图片相对容器左移200px，这意味着图片右部分的100px内容将出现在容器中）
-250px（将图片相对容器左移250px，这意味着图片的右边界对齐容器的中线）

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

<position>一个<position>定义一组 x/y 坐标（相对于一个元素盒子模型的边缘），来放置这个项目（原文为 item）。它可以被定义为一个值或者两个值。如果被定义为两个值，那么第一个值代表水平位置，第二个代表垂直垂直位置。如果只指定一个值，那么第二个值默认为center。
一个值的语法:这个值可以是：
两个值的语法:一个定义 x 坐标，另一个定义 y 坐标。每个值可以是：
- 关键字top,left,bottom,right中的一个。如果这里给出left或right，那么这个值定义 x 轴位置，另一个值定义 y 轴位置。如果这里给出top或bottom，那么这个值定义 y 轴位置，另一个值定义 x 轴位置。
- <length>或<percentage>。如果另一个值是left或right，那么这个值（指<length>或<percentage>）定义相对于上边缘的 y 轴位置。如果两个值都是<length>或<percentage>，那么第一个值定义 x 轴位置，第二个定义 y 轴位置。
注意：
也就是说，top top和left 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

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

例子

下面三个例子使用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;
}

<!DOCTYPE html>
<html>
<head>
<style>
p{
	width:350px;
	height:200px;
	border:1px solid #ccc;
	background-origin:content-box;
	background-image:url("images/鸟.png");
	background-repeat:no-repeat;
background-position:right;
	padding:30px;
}
</style>
</head>

<body>
<p>html中文网html中文网html中文网html中文网html中文网html中文网html中文网html中文网html中文网html</p>
</body>
</html>

效果图：