背景位置属性
最后更新：2026-09-13
background-position 背景位置属性
background-position 属性用于设置背景图像在元素中的起始位置，默认从左上角（0% 0%）开始。它支持关键字（left、center、right、top、bottom）、长度值和百分比。该属性常与 background-image 配合使用以精确定位背景图。
| 分类 | |
|---|---|
| 初始值 | 0% 0% |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | length |
| CSS 版本 | CSS1 |
| 状态 | 标准 |
📝 语法
background-position: <position>{1,4};⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
left | center | right | top | bottom | 关键字 | 预定义位置关键字 |
<length> | <percentage> | 类型 | 精确位置值 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-position | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： 使用百分比时，background-position: 100% 100% 等价于 right bottom。
提示： 可以设置负值将背景图定位到元素外部，常用于雪碧图（sprite）技术。
❓ 常见问题
Q如何让背景图居中显示？
A使用 background-position: center; 或 background-position: 50% 50%; 都可以让背景图在容器内水平垂直居中。center 关键字等价于 50% 50%。配合 background-repeat: no-repeat 使用，避免背景图在容器内平铺。
Qbackground-position 一个值和两个值有什么区别？
A一个值时，未指定的方向默认为 center，如 background-position: left 等价于 left center；两个值时，第一个是水平方向、第二个是垂直方向，如 center top。还支持偏移量语法，如 right 20px bottom 10px 表示相对右下角偏移。
Qbackground-position 的百分比和像素定位有什么区别？
A百分比定位时，图片自身对应百分比位置的点会与容器对应百分比位置的点对齐：50% 50% 即图片中心与容器中心重合；像素定位则是图片左上角相对容器左上角的固定偏移。想让背景图靠右显示用 100% 或 right 0，需要精确间距则用 right 10px 这类偏移写法。
Q如何用 background-position 实现雪碧图（sprite）？
A雪碧图是把多张图标拼成一张大图，通过 background-position 负值位移显示所需部分。例如图标 32px 一个，第二个用 background-position: -32px 0。配合 background-size 缩放时位置值需同步换算。该技术正逐步被字体图标和 SVG 取代。
🏷️ 相关属性
💡 相关案例
📚 相关教程
