用 background-origin 属性设置背景图片原点定位，其三个取值 padding-box（默认，原点在padding左上角）、border-box（原点在border左上角）、content-box（原点在content左上角）决定 background-position: 0 0 的参考位置。
设置背景图片原点定位用 background-origin
直接答：用 background-origin 属性。它不控制图片显示范围（那是 background-clip 的事），只管“background-position: 0 0”这个坐标点落在哪儿。
background-origin 的三个取值和实际效果差异
它的值决定背景定位的参考系起点，不是“图片从哪开始画”，而是“0 0 这个位置对应元素的哪个边界”：
-
padding-box（默认）：原点在 padding 区域左上角（即 border 内侧、padding 外侧） -
border-box：原点在 border 区域左上角（即 border 外侧） -
content-box：原点在 content 区域左上角（即 padding 内侧、内容区外缘）
举个例子：一个元素有 border: 10px solid red、padding: 20px，设 background-position: 0 0，那么：
- 用
padding-box→ 图片左上角贴着 padding 左上角（离 border 内边 0px） - 用
border-box→ 图片左上角贴着 border 左上角（伸进 border 里 10px） - 用
content-box→ 图片左上角贴着内容区左上角（离 padding 内边 0px，也就是离 border 内边 20px）
为什么改了 background-origin 却没看到变化？
常见原因有这几个：
- 没配
background-position—— 如果只写background-origin: content-box但没写background-position，浏览器仍按默认0 0渲染，而默认原点本来就是padding-box，视觉上可能看不出区别 - 背景图
repeat了 —— 文档明确说：background-origin对平铺背景无效，此时浏览器会忽略它，统一从border-box开始铺 - 同时用了
background-clip且裁剪区域比 origin 小 —— 比如background-origin: border-box但background-clip: content-box，图片虽从 border 起算定位，但超出 content 区的部分被裁掉，容易误判为“没生效”
和 background-clip 配合使用的典型场景
二者常一起调，尤其做卡片内嵌阴影、带边框的渐变背景、或图标式背景时：
- 想让背景图刚好填满内容区，且定位精准到文字起始位置 →
background-origin: content-box; background-clip: content-box - 想让背景图延伸到边框下，制造“溢出”感，但又不想背景色/图盖住边框 →
background-origin: border-box; background-clip: padding-box - 用
linear-gradient做边框内侧描边效果 →background-origin: padding-box; background-clip: border-box（注意顺序：origin 定起点，clip 定终点）
真正容易被忽略的是：这两个属性都只对单层背景生效；多背景时，每个逗号分隔的背景可单独声明自己的 background-origin 和 background-clip，但必须写在对应背景声明里，不能提级统配。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
