背景原点属性
最后更新：2026-09-13
background-origin 背景原点属性
background-origin 属性用于设置背景图像定位的原点区域，决定 background-position 的参考基准。默认 padding-box 表示背景相对内边距区域定位，border-box 相对边框区域，content-box 相对内容区域。该属性常与 background-clip 配合使用。
| 分类 | |
|---|---|
| 初始值 | padding-box |
| 继承 | 否 |
| 适用于 | |
| 可动画 | |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
background-origin: border-box | padding-box | content-box;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
border-box | padding-box | content-box | 关键字 | 背景定位原点 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| background-origin | ✓ v4 | ✓ v12 | ✓ v4 | ✓ v3.1 | ✓ v10 |
| 所有主流浏览器均支持 | |||||
提示： background-origin 影响背景图的定位起点，但不影响背景的绘制范围。
提示： 当 background-attachment: fixed 时，background-origin 会被忽略，因为背景相对视口定位。
❓ 常见问题
Qbackground-origin 和 background-clip 如何配合使用？
Aorigin 决定背景图定位起点区域，clip 决定背景绘制的裁切范围，二者独立可分别设置。如 background-origin: content-box; background-clip: border-box; 让图片从内容区定位但绘制延伸到边框下。常用组合是两者设为相同值，保证背景从起点完整显示。
Qbackground-origin 的默认值是什么？
A默认值是 padding-box，即背景图以内边距区域（padding 外边缘）的左上角作为定位原点。这与 background-clip 的默认值 border-box 不同，是两者容易混淆的主要原因。当 background-attachment: fixed 时 origin 会被忽略，因为背景此时相对视口定位。
Qbackground-origin 什么时候看不到效果？
A三种情况：一是背景图没设 background-position、保持默认 0% 0% 时，只有有边框才能看出差异；二是 background-attachment: fixed 时被忽略；三是仅设背景色时无效（origin 只影响背景图）。想看效果，加边框 + no-repeat 背景图再切换三个值。
Qbackground-origin 的三个值分别是什么含义？
Aborder-box：背景图以边框区域左上角为原点，图片会覆盖到边框之下；padding-box（默认）：以内边距区域左上角为原点，边框下不出现图片；content-box：以内容区域左上角为原点，图片定位在内容区内。三者配合 background-position 可以精确控制背景图相对元素哪个盒子对齐。
🏷️ 相关属性
💡 相关案例
📚 相关教程
