简介：
本教程深入解析CSS中的Background-position属性，通过详细解释和实例图解，帮助读者掌握背景图像定位技巧。 CSS中的`background-position`属性用于控制元素背景图像的位置。它是一个非常重要的CSS样式，让你能够精确地定位背景图像在元素内的显示位置。 ### 语法 `background-position`的语法有两种形式： 1. `background-position : length || length` 2. `background-position : position || position` 其中，`length`可以是百分比或由浮点数字和单位标识符（如px、em、%）组成的长度值。而`position`则可以是以下关键字：top, bottom, left, center 和 right。 ### 取值说明 - **Length**: 代表具体的距离，比如20px 或30%。 - **Position**: 表示相对位置，例如 top、bottom 指定垂直方向；left、right、center 则用于水平方向。 **默认值：** `background-position: 0% 0%;` 这意味着背景图片的左上角会与元素内容区域的左上角对齐。注意这不考虑 padding 的影响。 ### 不受 Padding 影响 设置 `background-position` 属性不会受到 element 的 padding 值的影响，也就是说即使设置了 padding 背景图像的位置仍然相对于元素的内容区域而非外边距区域进行定位。 **单值设置：** 若只指定一个值（如 background-position: 50%），默认纵坐标为 50%，使背景图片居中显示于横轴方向上。 **双值设置：** 如果指定了两个值，例如 `background-position: left bottom` ，第一个值用于横向定位，第二个值则纵向定位。 ### 覆盖规则： 当指定的两个位置发生冲突时（如 right center），right 会覆盖 center。背景图像将在右侧居中显示。 #### 示例应用： 1. **对齐元素左上角：** - `background-position: left top;` - `background-position: 0% 0%;` 2. 背景图片位置不会因 padding 的存在而改变，只是增加了元素的尺寸。 3. **偏移背景图像**： - 横向左移70px、纵向上移40px：`background-position: -70px -40px;` - 向右移动70像素向下移动40像素： `background-position: 70px 40px;` 4. **居中显示**： - 使用百分比或关键字形式使背景图像中心对齐，例如`50% 50%;` 或者 `center center`. 通过灵活运用这些设置，你可以实现背景图片在页面上的各种定位效果。结合使用 background-size 和 background-repeat 属性可以创建更多复杂的布局和视觉设计。 以上内容详细介绍了 `background-position` 的基本用法与示例应用。