必须同时设置 background-origin: content-box 和 background-clip: content-box 才能使背景严格限制在内容区；前者控制定位原点，后者控制渲染范围，二者缺一不可。
background-origin 设置为 content-box 才能只铺满内容区
默认情况下
的定位原点在 padding box 的左上角，所以图片会延伸到 padding 区域内。想让它严格限制在 content 区（即不覆盖 padding），必须显式设置
。
注意：这和
不同——后者控制「背景是否绘制到某区域」，而
控制「背景从哪开始定位和铺排」。只改
不改
，图片仍可能因尺寸或 repeat 行为溢出到 padding 里。
必须配合 background-clip: content-box 才真正“不画进 padding”
即使
设为
，如果背景是纯色或渐变，它默认仍会绘制到 padding 和 border 区（除非你限制）。图片虽不“起始”于 padding，但若设了
且尺寸小，又没裁剪，视觉上可能看不出问题；但一旦用
或大图缩放，padding 区就容易被填满。
→ 定位原点移到内容区左上角
→ 渲染范围严格裁剪到内容区边缘
二者缺一不可，尤其对
或
场景更敏感
常见错误：混淆 origin 和 clip，或忽略盒模型影响
很多人试了
发现 padding 还是有图，原因通常是：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
没加
，背景仍在 padding 区绘制
元素设置了
，但 content 区实际很小，导致图片拉伸/裁剪异常
用了
—— 这时尺寸按 padding box 计算，即使 origin 是 content-box，也会撑满整个盒（含 padding）
父容器有 transform 或 filter，意外触发新的 stacking context，干扰背景渲染边界判断
一个可靠的小例子验证效果
此时
只会在中间 260×160px 的内容区内重复，padding 的 20px 空白保持透明（或由父背景透出）。删掉其中任一
声明，padding 区就会出现图案。
真正容易被忽略的是：这个组合对
也生效——
会让圆角只切内容区，背景不会延伸到圆角外，但 border 仍按完整盒绘制。如果要背景也圆角，得换用
或额外 wrapper。
background-imagebackground-origin: content-boxbackground-clipbackground-origincliporiginbackground-origincontent-boxbackground-repeat: no-repeatrepeatbackground-origin: content-boxbackground-clip: content-boxbackground-size: covercontainbackground-origin: content-boxbackground-clip: content-boxbox-sizing: border-boxbackground-size: 100% 100%.card {
padding: 20px;
width: 300px;
height: 200px;
background-image: url("dot.png");
background-repeat: repeat;
background-origin: content-box;
background-clip: content-box;
}dot.pngcontent-boxborder-radiusbackground-clip: content-boxpadding-box