CSS background-position 语法
在 CSS 中，background-position 属性用于定义元素的背景图片的位置。
语法：
background-position: 关键字;说明：
background-position 属性的取值有 2 种。
- 数值，比如像素值（px）、百分比（%）、em、rem 等。
- 关键字，如下表所示和下图所示。
| 取值 | 说明 |
|---|---|
| top left（默认值） | 左上 |
| top center | 靠上居中 |
| top right | 右上 |
| center left | 居中靠左 |
| center center（或简写为 center） | 正中 |
| center right | 居中靠右 |
| bottom left | 左下 |
| bottom center | 靠下居中 |
| bottom right | 右下 |
需要清楚的是，当取值为关键字时，background-position 是使用 “水平关键字” 和 “垂直关键字” 进行组合的。
- 水平关键字：left、center、right。
- 垂直关键字：top、center、bottom。
其中下面 2 种写法是等价的（非常重要），background-position 不区分前后顺序，只关注是使用了哪个水平关键字，或哪个垂直关键字。
/* 写法 1 */
background-position: top left;
/* 写法 2 */
background-position: left top;此外，background-position 还支持指定 4 个值，允许我们指定背景图片距离任意边缘的偏移量。比如：
/* 图片距离右侧边缘 20px，距离底部边缘 30px */
background-position: right 20px bottom 30px;注意:
- 只有元素的宽高大于背景图片的宽高时，background-position 属性才会有明显效果。
- 如果 background-position 只指定一个值，它会用于水平方向，而垂直方向默认使用 center。如果指定两个值，第一个值用于水平方向，第二个值用于垂直方向。
- 如果使用 background-image 指定了多个背景图片，此时可以使用 background-position 为每张图片指定不同的位置。
CSS background-position 摘要
| 属于 | CSS 背景 |
|---|---|
| 使用频率 | 高 |
| 是否继承 | 否 |
| 默认值 | top left 或 0% 0% |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS background-position 示例
下面先来看几个简单例子：我们有一张 25px * 25px 的小图片（如下图所示），然后通过不同的 background-position 属性取值，来看看实际效果如何。
示例 1：background-position 取值为 “数值”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid gray;
background-image: url("imgs/flower.svg");
background-repeat: no-repeat;
background-position: 40px 80px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
background-position: 40px 80px; 表示背景图片距离元素左边为 40px，距离顶边为 80px。
示例 2：background-position 取值为 “关键字”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid silver;
background-image: url("imgs/flower.svg");
background-repeat: no-repeat;
background-position: center right;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
background-position: center right; 表示设置背景图片的位置为 “居中靠右”。再次强调一下，下面 2 种写法是等价的。
/* 写法 1 */
background-position: center right;
/* 写法 2 */
background-position: right center;示例 3：background-position 设置多个背景图片的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 200px;
height: 200px;
background-image: url("imgs/bird.jpg"), url("imgs/goat.jpg"); /* 两个背景图片 */
background-repeat: no-repeat; /* 防止重复 */
background-position: top left, bottom right; /* 设置位置 */
background-size: 100px 100px; /* 背景图片大小 */
background-color: lightskyblue; /* 背景颜色 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们设置了两张背景图片：frog.jpg 和 goat.jpg，它们会按照指定的顺序堆叠。其中，background-position: top left, bottom right; 表示设置第一张背景图片为 “左上”，并设置第二张背景图片为 “右下”。
background-position 是一个复合属性
background-position 其实是一个复合属性，它是以下 2 个属性的简写。
