必须为或显式设置background-image及background-repeat、background-size才生效，路径以html文件为基准，推荐用class封装并注意svg图标与大图性能差异。
直接给 <td> 或 <code><th> 加 <code>background-image 才生效
HTML 表格本身没有 background 属性，更不存在 _BACKGROUND 这类伪属性——浏览器会直接忽略它。真正起作用的只有 CSS 的 background-image，且必须作用在 <td> 或 <code><th> 元素上。<code><table> 上设了，子单元格也不会“继承”背景图；用 <code>style 写在标签里是最直接的验证方式。
常见错误现象：
- 图片路径没错，但页面空白 → 忘了加
background-repeat: no-repeat，小图默认平铺成马赛克 - 图片只显示左上角一小块 → 没设
background-size，浏览器按原始尺寸渲染 - 图片加载失败后一片白 → 没配
background-color作降级色
background-repeat 和 background-size 必须显式声明
不写这两项，background-image 很可能“看不见”或“看得难受”。默认 repeat 会让小图标铺满整个单元格，而默认 auto 尺寸常导致拉伸变形或只露一角。
- 图标类（如 check.svg、doc-icon.png）：用
background-repeat: no-repeat; background-position: right 6px center;+padding-right: 24px避免文字遮挡 - 装饰性纹理（如 subtle-pattern.png）：用
background-repeat: repeat; background-size: 16px 16px; - 全宽覆盖图（如 banner-bg.jpg）：用
background-size: cover; background-position: center;，并确保单元格有明确高度
路径基准是 HTML 文件位置，不是 CSS 文件
用内联 style 时，url("img/icon.png") 的路径解析起点是当前 HTML 文件所在目录，不是 CSS 文件——这点极易出错，尤其当 CSS 抽离为外部文件后还照搬原路径。
- 如果 HTML 在
/pages/report.html，图片在/assets/icons/flag.svg，则应写url("../assets/icons/flag.svg") - URL 中含空格或中文？必须编码，比如
url("icon%20copy.png")，否则部分浏览器会静默失败 - 本地测试正常、上线 404？大概率是相对路径没随部署结构调整，建议统一用以站点根目录为基准的路径：
url("/assets/bg.png")
用 class 替代重复的 style 更可靠
给每个 <td> 写 <code>style="background-image: url(...)..." 容易引号嵌套出错（比如 URL 里带双引号），也难批量调整。封装成 class 是更稳的选择。
- 定义：
.status-pending { background-image: url("clock.svg"); background-repeat: no-repeat; background-position: 4px center; padding-left: 24px; } - 使用：
<td class="status-pending">处理中</td> - 性能提示：SVG 背景图缩放无损，推荐用于图标；大图（＞10KB）作单元格背景会拖慢滚动帧率，优先压缩或改用 CSS 渐变
background-repeat 的默认行为和路径解析基准——前者让新手以为“图片没加载”，后者让上线后突然全黑。别依赖“看起来能跑”，把这两项写死才真正可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
