CSS 属性 background-origin 用于指定背景图片的定位原点，即背景图片的起始位置相对于容器的哪个边缘。该属性有三个可能的取值：padding-box、border-box 和 content-box。
- padding-box：背景图片的定位原点位于容器的内边距边缘。也就是说，背景图片从容器的内边距开始显示，不包括边框和内容区域。
- border-box：背景图片的定位原点位于容器的边框边缘。背景图片从容器的边框开始显示，不包括内容区域。
- content-box：背景图片的定位原点位于容器的内容区域的左上角。背景图片从容器的内容区域开始显示，不包括内边距和边框。
语法
background-origin: padding-box|border-box|content-box;
示例
-- -------------------- ---- ------- --- - ------ ------ ------- ------ -------- ----- ------- --- ----- ----- ----------------- ---------------------- - ------------ - ------------------ ------------ - ----------- - ------------------ ----------- - ------------ - ------------------ ------------ -
<div class="padding-box">padding-box</div> <div class="border-box">border-box</div> <div class="content-box">content-box</div>
在上面的示例中，我们创建了一个包含背景图片的 div 元素，并分别使用 padding-box、border-box 和 content-box 三种取值来设置 background-origin 属性。通过观察这三个元素的背景图片显示效果，可以更清楚地理解 background-origin 的作用。