English
资源说明：语法：background-position : length || length background-position : position || position 取值：length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position : top | center | bottom | left | center | right
说明：设置或检索对象的背景图像位置。必须先指定 background-image 属性。该属性定位不受对象的补丁属性( padding )设置影响。默认值为： 0% 0% 。此时背景图片将被定位于对象不包括补丁(
CSS中的`background-position`属性用于控制元素背景图像的位置。它是一个非常重要的CSS样式，让你能够精确地定位背景图像在元素内的显示位置。本篇详细图文介绍将深入解析`background-position`的语法、取值和常见用法。
`background-position`的语法有两种形式：
1. `background-position : length || length`
2. `background-position : position || position`
其中，`length`可以是百分比或由浮点数字和单位标识符（如px、em、%）组成的长度值，而`position`则可以是`top`、`center`、`bottom`、`left`、`middle`、`right`这些关键字。
**取值说明**：
- `length`: 代表具体的距离，比如`20px`或`30%`。
- `position`: 代表相对位置，`top`、`bottom`表示垂直方向，`left`、`right`、`center`表示水平方向。
**默认值**：`0% 0%`，意味着背景图片的左上角会与元素内容区域的左上角对齐，注意这不考虑`padding`。
**不受`padding`影响**：`background-position`的设置不会受元素`padding`属性的影响，也就是说，即使设置了`padding`，背景图片的位置仍然相对于元素的内容区域，而不是外边距区域。
**单值设置**：如果只指定一个值，比如`background-position: 50%`，这个值将应用于横坐标，纵坐标默认为`50%`，使背景图片居中。
**双值设置**：如果指定两个值，例如`background-position: left bottom`，第一个值用于横坐标，第二个值用于纵坐标。
**覆盖规则**：如果两个值中有冲突，如`right center`，那么`right`会覆盖`center`，背景图片将在右侧居中。
以下是一些具体的示例和应用：
1. `background-position: 0 0;` 或 `background-position: left top;` 或 `background-position: 0% 0%;` 这些设置会让背景图片的左上角与元素的左上角对齐。
2. 即使有`padding`，背景图片的位置也不会改变，只是元素的尺寸会因`padding`而增大。
3. `background-position: -70px -40px;` 会使背景图像相对于元素左上角向左偏移70px，向上偏移40px。
4. `background-position: 70px 40px;` 会使背景图像向右偏移70px，向下偏移40px。
5. `background-position: 50% 50%;` 或 `background-position: center center;` 会将背景图像居中显示。这里的50%计算方式是：(元素宽度 - 背景图像宽度) * 50%，超出部分会被隐藏，同样适用于高度。
以上内容详细介绍了`background-position`的基本用法和示例。通过灵活运用这些设置，你可以实现背景图片在页面上的各种定位效果，从而丰富网页的视觉设计。在实际开发中，结合`background-size`和`background-repeat`属性，你可以创建更多复杂的背景布局。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
