CSS中的background-origin属性用于定义背景图片的起始绘制区域，它决定了背景图片是相对于元素的内容区域、内边距区域还是边框区域来定位，是控制背景显示效果的重要属性之一。
background-origin属性的基本语法
该属性的语法格式如下：
/* 基本语法 */ background-origin: 取值;
它的可选取值有三个，分别对应盒模型的三个不同区域：
- content-box：背景图片相对于元素的内容区域定位
- padding-box：背景图片相对于元素的内边距区域定位，这是该属性的默认值
- border-box：背景图片相对于元素的边框区域定位
不同取值的效果演示
我们通过一个具体的示例来观察三个取值的差异，首先定义基础的元素样式：
/* 基础样式 */
.demo-box {
width: 300px;
height: 200px;
padding: 30px;
border: 20px dashed #333;
background-image: url('https://ipipp.com/bg.png');
background-repeat: no-repeat;
margin-bottom: 20px;
}
取值为content-box
设置background-origin为content-box时，背景图片会从内容区域的左上角开始绘制：
.content-origin {
background-origin: content-box;
}
取值为padding-box（默认值）
不设置该属性或者设置为padding-box时，背景图片会从内边距区域的左上角开始绘制：
.padding-origin {
background-origin: padding-box;
}
取值为border-box
设置为border-box时，背景图片会从边框区域的左上角开始绘制，会覆盖到边框下方：
.border-origin {
background-origin: border-box;
}
注意事项
在使用background-origin属性时，有几个点需要特别注意：
- 如果背景图片设置了
background-attachment: fixed，那么background-origin属性会失效，因为固定背景是相对于视口定位的 - 当元素设置了
background-clip属性时，background-origin的绘制区域可能会被裁剪，最终显示效果会受background-clip的影响 - 该属性可以配合
background-position属性一起使用，进一步调整背景图片在起始区域内的具体位置
实际应用场景
在实际开发中，这个属性常用于以下场景：
- 需要让背景图片和内容区域保持固定间距，不随内边距变化而偏移时，使用content-box取值
- 设计边框叠加背景的效果时，使用border-box取值，让背景延伸到边框区域
- 需要背景图片从内边距开始显示，避免紧贴内容边缘时，使用默认的padding-box取值即可
通过合理设置background-origin属性，可以精准控制背景图片的显示位置，减少不必要的定位计算，提升样式开发的效率。
CSSbackground-origin背景定位盒模型前端样式修改时间：2026-06-13 17:00:25