定义和用法
background-position属性用于设置背景图像在元素中的起始位置。
background-position第一个值指水平方向（x轴）的定位，第二个值指垂直方向（y轴）的定位（省略默认：center）。
| 默认值： | 0% 0% |
| 继承性： | 否 |
| 可动画性： | 支持。请参阅：可动画属性。 |
| 版本： | CSS1 |
| JavaScript 语法： | object.style.backgroundPosition="center" |
提示：您需要把background-attachment属性设置为fixed，才能保证该属性在 Firefox 和 Opera 中正常工作。
常用的实例
接下来通过多个实例演示background-position属性的用法，来深化您对background-position属性的理解。
1. 关键字值
top left、top center、top right、center left、center center、center right等关键词。
.example {
background-image:url('/uploads/20250507/deer.png');
background-repeat: no-repeat;
background-position: center top;
}2. 百分比值
第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%，右下角是 100% 100%。
.example {
background-image:url('/uploads/20250507/deer.png');
background-repeat: no-repeat;
background-position: 25% 75%;
}3. 长度值
第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。
.example {
background-image:url('/uploads/20250507/deer.png');
background-repeat: no-repeat;
background-position: 50px 100px;
}4. 混合值
第一个值是水平位置，第二个值是垂直位置。右下角距离右边缘 20px，下边缘 10px。
.example {
background-image:url('/uploads/20250507/deer.png');
background-repeat: no-repeat;
background-position: right 20px bottom 10px;
}5. 多背景图
元素可以设置多个背景图，并设置对应的背景图位置，用逗号分隔。
.example {
background-image:url('/uploads/20250507/deer.png'),url('/uploads/20250507/forest.jpg');
background-repeat: no-repeat;
background-position: left top, right bottom;
}CSS 语法
background-position: value;属性值
| 值 | 描述 |
left topleft centerleft bottomright topright centerright bottomcenter topcenter centercenter bottom |
如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0% 0%。 |
x% y% |
第一个值是水平位置，第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值，另一个值将是 50%。 |
xpos ypos |
第一个值是水平位置，第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值，另一个值将是50%。 您可以混合使用 % 和 position 值。 |
initial |
将此属性设置为其默认值。参阅 initial。 |
inherit |
从其父元素继承此属性。参阅 inherit。 |
浏览器支持
表中的数字指定了完全支持background-position属性的第一个浏览器版本。
 |
 |
 |
 |
 |
| Chrome | Edge | Firefox | Safari | Opera |
| 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
相关页面
CSS 教程：CSS 背景
CSS 参考手册：CSS 背景图像属性
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型，文本属性等，助您快速检索 CSS 使用方法。
87
章节
49
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈