background-origin 默认值为 padding-box，导致 background-position: 0 0 对齐 padding 区域左上角而非内容区；需设 content-box 才紧贴内容边缘，并配合 box-sizing: border-box 防止尺寸错位。
background-origin 默认值让 padding 干扰了定位基准
背景图默认从 padding-box 开始绘制，也就是包含内边距的区域左上角。当你给容器设了 padding: 20px，background-position: 0 0 实际是把图左上角对齐到 padding 区域的左上角——离内容区还有 20px 距离，看起来就像“向右下偏移了”。这不是 bug，是规范行为。
想让背景图紧贴文字或内容边缘，必须显式改基准：background-origin: content-box。这时 0 0 才真正对齐内容区左上角。
- 保持
padding-box（默认）：适合背景要铺满整个盒区（含 padding）的场景，比如带阴影/描边的卡片底图 - 切到
content-box：绝大多数图文组合、按钮图标、表单装饰图都需要这个 - 慎用
border-box：它把 border 区域也纳入起点，但 border 宽度常为 0 或不可控，容易引入意外偏移
box-sizing 不匹配会让 padding “偷偷变大”
如果容器写了 width: 300px + padding: 20px，又没设 box-sizing，那实际总宽度是 340px。背景图按 300px 容器尺寸算的定位，在 340px 空间里就必然错位——尤其在响应式断点切换时，这种偏差会被放大。
统一加 box-sizing: border-box，让 padding 和 border 都包含在声明的 width 内，背景图坐标系才稳定。
立即学习“前端免费学习笔记（深入）”；
- 全局重置推荐：
* { box-sizing: border-box; } - 单独修复时，别只加
background-origin，漏掉box-sizing就白调 - 用开发者工具看 computed 的
width和padding，确认二者是否符合预期
浮动塌陷 + padding 导致背景“悬空”
父容器内有浮动子元素，又设了 padding，但没清除浮动，容器高度会塌成 0。此时哪怕 background-origin: content-box，内容区高度也是 0，背景图只剩一条线——你看到的“偏移”，其实是背景根本没地方渲染。
必须先解决塌陷，再谈定位。最简验证法：在 DevTools 里选中父容器，看 computed height 是不是 0。
- 加 clearfix：
.parent::after { content: ""; display: table; clear: both; } - 避免用
overflow: hidden清浮动，它可能意外裁切子元素 - 如果父容器本身是 flex 或 grid 容器，浮动本就不该存在，直接删浮动代码
多背景图下 origin 和 size 错位会连锁失效
多个背景图共用一个 background-origin 值，但如果你用逗号分隔写了多个 background-position 和 background-size，却只配了一个 background-origin，所有图都强制用同一个基准——而某张图可能需要 content-box，另一张需要 padding-box，结果全乱。
CSS 多背景不支持 origin 分层，只能妥协：要么统一用 content-box（推荐），要么拆成多个嵌套容器各自控制。
- 检查是否误用了
background简写：它会把未写出的background-origin重置为默认值 - 调试时临时加
background-color: #eee，确认 padding 区域是否被意外撑开 - 移动端真机测试很重要：Safari 对
background-origin的解析偶尔有细微差异
背景图和 padding 的关系，本质是“谁定义了坐标原点”。很多人调半天 background-position 数值，却没意识到起点早被 padding 和 box-sizing 悄悄挪走了。
