必须同时设置 background-origin: content-box 和 background-clip: content-box 才能使背景严格限制在内容区；前者控制定位原点，后者控制渲染范围，二者缺一不可。
background-origin 设置为 content-box 才能只铺满内容区
默认情况下 background-image 的定位原点在 padding box 的左上角，所以图片会延伸到 padding 区域内。想让它严格限制在 content 区（即不覆盖 padding），必须显式设置 background-origin: content-box。
注意：这和 background-clip 不同——后者控制「背景是否绘制到某区域」，而 background-origin 控制「背景从哪开始定位和铺排」。只改 clip 不改 origin，图片仍可能因尺寸或 repeat 行为溢出到 padding 里。
必须配合 background-clip: content-box 才真正“不画进 padding”
即使 background-origin 设为 content-box，如果背景是纯色或渐变，它默认仍会绘制到 padding 和 border 区（除非你限制）。图片虽不“起始”于 padding，但若设了 background-repeat: no-repeat 且尺寸小，又没裁剪，视觉上可能看不出问题；但一旦用 repeat 或大图缩放，padding 区就容易被填满。
-
background-origin: content-box→ 定位原点移到内容区左上角 -
background-clip: content-box→ 渲染范围严格裁剪到内容区边缘 - 二者缺一不可，尤其对
background-size: cover或contain场景更敏感
常见错误：混淆 origin 和 clip，或忽略盒模型影响
很多人试了 background-origin: content-box 发现 padding 还是有图，原因通常是：
- 没加
background-clip: content-box，背景仍在 padding 区绘制 - 元素设置了
box-sizing: border-box，但 content 区实际很小，导致图片拉伸/裁剪异常 - 用了
background-size: 100% 100%—— 这时尺寸按 padding box 计算，即使 origin 是 content-box，也会撑满整个盒（含 padding） - 父容器有 transform 或 filter，意外触发新的 stacking context，干扰背景渲染边界判断
一个可靠的小例子验证效果
.card {
padding: 20px;
width: 300px;
height: 200px;
background-image: url("dot.png");
background-repeat: repeat;
background-origin: content-box;
background-clip: content-box;
}
此时 dot.png 只会在中间 260×160px 的内容区内重复，padding 的 20px 空白保持透明（或由父背景透出）。删掉其中任一 content-box 声明，padding 区就会出现图案。
真正容易被忽略的是：这个组合对 border-radius 也生效——background-clip: content-box 会让圆角只切内容区，背景不会延伸到圆角外，但 border 仍按完整盒绘制。如果要背景也圆角，得换用 padding-box 或额外 wrapper。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
