CSS background-position-x 语法
在 CSS 中，background-position-x 属性用于定义元素的背景图片的水平位置。
语法：
background-position-x: 数值 | 关键字;说明：
background-position-x 属性的取值有 2 种。
- 数值，比如像素值（px）、百分比（%）、em、rem 等。
- 关键字，常用取值如下表所示。
| 取值 | 说明 |
|---|---|
| left（默认值） | 左边 |
| center | 中间 |
| right | 右边 |
注意:
- 只有元素的宽度大于背景图片的宽度时，background-position-x 属性才会有效果。
- background-position-x 定义的是背景图片的 “水平位置”，而 background-position-y 定义的是背景图片的 “垂直位置”。
CSS background-position-x 摘要
| 属于 | CSS 背景 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 否 |
| 默认值 | left 或 0% |
| 兼容性 | 查看 |
| 官方文档 | 暂无 |
| MDN | 查看 |
CSS background-position-x 示例
下面先来看几个简单例子：我们有一张 25px * 25px 的小图片（如下图所示），然后通过不同的 background-position-x 属性取值，来看看实际效果如何。
示例 1：background-position-x 取值为 “数值”
<!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-x: 40px;
background-position-y: 80px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
background-position-x: 40px;
background-position-y: 80px;上面两句代码可以简写为一句代码：
background-position: 40px 80px;示例 2：background-position-x 取值为 “关键字”
<!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-x: center;
background-position-y: top;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
background-position-x: center;
background-position-y: top;上面两句代码可以简写为一句代码：
background-position: center top;background-position 是一个复合属性
background-position 其实是一个复合属性，它是以下 2 个属性的简写。
- background-position-x
- background-position-y
