background-origin对table元素默认无效，因表格单元格盒模型受border-collapse控制且浏览器支持不一致；仅在border-collapse: separate、显式padding/border、background-clip: padding-box等条件下才可能生效。
background-origin 对 table 元素默认无效，先确认是否真需要它
直接给 <table> 或 <code><td> 设置 <code>background-origin 很可能没反应——因为表格单元格（<td>、<code><th>）默认的盒模型行为和普通块元素不同：它们的 <code>padding 和 border 渲染受 border-collapse 控制，且多数浏览器对表格元素的 background-origin 支持不一致（尤其在 border-collapse: collapse 下，border-box 常被忽略）。
真正起作用的场景极少，只在以下情况才值得尝试：
-
border-collapse: separate（非合并边框） + 显式设置了padding和border - 目标是让背景图严格对齐单元格内容区（比如图标紧贴文字 baseline），且你已排除
background-position和padding调整更简单的方式 - 你正在调试一个带复杂内边距/描边的自定义表格组件（如带阴影的卡片表格），且其他元素已统一用
background-origin
给 td 设置 background-origin 的实操条件
想让 background-origin: content-box 在 <td> 上生效，必须同时满足：<ul>
<li>设置 <code>border-collapse: separate（否则 padding 可能被压缩，border-box 原点不可靠）
<td> 有明确的 <code>padding（例如 padding: 12px）和 border（例如 border: 2px solid #eee）background-clip 不能是 border-box（默认值），否则即使 origin 是 content-box，图片也会被裁剪到 border 内侧background-repeat: no-repeat，否则偏移会被重复掩盖示例：
td {
border-collapse: separate;
padding: 12px;
border: 2px solid #eee;
background-image: url(icon-check.png);
background-repeat: no-repeat;
background-position: 0 0;
background-origin: content-box;
background-clip: padding-box; /* 关键：不能是 border-box */
}
为什么 background-origin: border-box 在 table 中常失效
当 border-collapse: collapse（表格默认）时，相邻单元格的边框会合并，border-box 的“外边缘”失去明确定义——浏览器无法确定原点该落在哪条合并边框上，于是回退到 padding-box 行为，导致设了 border-box 也看不出变化。
常见错误现象：
- 写了
background-origin: border-box，但背景图依然从内边距左上角开始画 - 用 DevTools 检查 computed 样式，发现
background-origin被解析为padding-box（浏览器降级处理） - 换用
<div> 包裹表格再设 origin，反而更可控<h3>更稳妥的替代方案：用 background-position + padding 精控</h3> <p>对绝大多数表格场景，直接调 <code>background-position更可靠：- 想让图标贴着文字左侧：用
background-position: 4px center（像素值基准稳定） - 想居中对齐内容区：用
background-position: calc(100% - 8px) center（避免受 padding 影响） - 如果单元格有固定
padding，把偏移量减去 padding 值即可模拟content-box效果，例如padding: 10px→background-position: -10px -10px - 避免用百分比，表格列宽动态变化时，
50%会随列宽漂移，导致图标错位
真正卡住人的不是属性不会用，而是花半小时调
background-origin，结果发现只要删掉border-collapse或改一行background-position就解决了。 - 想让图标贴着文字左侧：用
