background-origin: padding-box 不生效？如何让背景图适配容器内边距？

嘿，我帮你找出问题所在啦！你现在的困惑其实是对background-origin属性的作用理解有点偏差——默认情况下background-origin的值就是padding-box，所以你单独设置它并不会改变什么效果。

你想要的是让背景图被内边距向内缩进，padding区域像图片的边框一样显示背景色，这时候需要同时调整两个CSS属性：background-origin和background-clip。

修改后的代码 #

.hero_image {
 min-height: calc(100vh - 72px);
 background-color: rgb(0, 97, 111);
 box-sizing: border-box;
 padding: 72px;
 /* 关键修改：让背景图以内容区为基准 */
 background-origin: content-box;
 background-clip: content-box;
 background-image: url("https://s7.postimg.cc/6vtowr3u3/salters_hill_old_logo.jpg");
 background-position: center center;
 background-repeat: no-repeat;
 background-size: contain;
}

为什么这样修改？ #

• background-origin: content-box：让背景图的定位和尺寸计算都以内容区域（也就是padding内侧的区域）为基准，而不是默认的padding区域
• background-clip: content-box：限制背景图只能绘制在内容区域内，不会延伸到padding的范围里

这样设置之后，padding区域就会显示你设置的深蓝色背景色，背景图乖乖待在内容区里，完全符合你想要的“内边距像图片边框”的效果~

内容的提问来源于stack exchange，提问作者Markeee