css3中background-position的四值语法

刨根问底，每个css属性都要知道它的所有值实在不容易。今天看看 background-position.

background-positionCSS中的属性允许您在其容器内移动背景图像（或渐变）。

简介

html {
  background-position: 100px 5px;
}

它有三种不同的取值：

长度值（例如100px 5px）
百分比（例如100% 5%）
关键字（例如top right）

默认值为0 0。这会将您的背景图像放在容器的左上角。

长度值很简单：第一个值是水平位置，第二个值是垂直位置。因此，100px 5px将图像向右移动100像素，向下移动五个像素。您可以设定长度值单位为px，em或任何其他的CSS长度值。

百分比有所不同。戴上你的数学帽子：用x％移动背景图像意味着 将图像中的X％点 与 容器中的X％点 对齐(PS：很多人解释的时候只会说向左向下移动了x%,这就无法解释50%)。例如，50%意味着它会将图像的中间与容器的中间对齐。100%意味着它会将图像的最后一个像素与容器的最后一个像素对齐，依此类推。

关键字只是百分比的捷径。这top right比记住和写作要容易得多0 100%，这就是关键字的意义。以下是所有五个关键字及其等价取值的列表：

top：垂直0％
right：水平100％
bottom：垂直100％
left：水平0％
center：如果水平尚未定义，则水平为50％。如果定义了则应用到垂直。

有趣的是，您关键字使用的顺序并不重要：与之top center相同center top。只有当您使用单一关键字时，您才能做到这一点。center 10%是不一样的10% center。

演示

此演示演示了background-position具有长度单位，百分比和关键字取值的集合示例。

声明值(Declaring Values)

background-position现代浏览器中最多可以放置四个值（有关详细信息，请参阅浏览器支持列表）。

如果您只声明 一个值，则该值是水平偏移量。浏览器将垂直偏移设置为center。

当您声明 两个值 时，第一个值是水平偏移量，第二个值是垂直偏移量。

当您开始使用三个或四个值时，事情会变得更加棘手，但您也可以更好地控制您的背景位置。

三或四值语法在关键字和长度或百分比单位之间进行交替。您可以在background-position的三值或四值中使用任何关键字值， _除_ center之外。

当您指定 三个值 时，浏览器将“丢失”第四个值插入为0.以下是三值的示例background-position：

#threevalues {
  background-position: right 45px bottom;
}

这样就可以将背景图像定位在右侧的45px和容器底部的0px。

这是一个background-position 四值的例子：

#fourvalues {
  background-position: right 45px bottom 20px;
}

这将背景图片定位在右侧的45px和容器底部的20px。

注意上面示例中值的顺序：关键字后跟长度单位。三或四个值background-position必须遵循该格式，关键字在长度或百分比单位之前。

演示

此演示包括一个值，两个值，三个值和四个值的示例background-position。

browser-support

基本价值得到支持。四值语法具有此支持：

Chrome	Safari	Firefox	Opera	IE	Android	iOS
25+	7+	13+	10.5+	9+	4+	7.1+

【翻译原文：】https://css-tricks.com/almanac/properties/b/background-position/

robin