直接用 background-image 配合 background-size: cover 和 background-repeat: no-repeat 即可生效，但单元格必须有明确宽高或内容撑开，否则图片不显示；推荐用 CSS 类统一控制并设置 background-origin: content-box 确保对齐。
直接用 background-image 配合 background-size: cover 和 background-repeat: no-repeat 就能生效，但单元格必须有明确宽高或内容撑开，否则图片不显示。
给单个 <td> 或 <th> 加背景图
内联样式最直观，适合调试或动态生成的单元格：
<td style="background-image: url('icon-star.png'); background-size: contain; background-repeat: no-repeat; background-position: center; width: 40px; height: 40px;"></td>- 必须设
width和height（或用padding撑开），否则<td>默认高度为 0，图片不可见 -
background-size: contain适合图标类小图；cover更适合铺满整个单元格的装饰图 - 避免用
background-attachment: fixed—— 在表格里会失效或错位
用 CSS 类统一控制带背景图的单元格
比内联样式更可维护，也方便配合 JS 动态切换：
- 定义类时记得加
background-color: transparent，防止旧样式残留干扰 - 示例：
.cell-flag {<br> background-image: url('flag-bd.png');<br> background-size: 100% auto;<br> background-repeat: no-repeat;<br> background-position: left center;<br> padding-left: 24px;<br> background-origin: content-box;<br>} -
background-origin: content-box确保图片对齐内容区而非边框盒，避免被border或padding推偏 - 如果单元格内容是孟加拉语等 RTL 文本，用
background-position: right center并配padding-right
表格整体加背景图后单元格文字看不清？
常见于深色图+深色文字，不是代码写错了，而是视觉层叠没处理好：
立即学习“前端免费学习笔记（深入）”；
- 优先给
<td>或<th>单独加background-color: rgba(255, 255, 255, 0.85)做遮罩层，别只调文字颜色 - 不要依赖
background-blend-mode—— 在多数表格场景下兼容性差，且 Firefox 对<table>的 blend 支持不稳定 - 若用
background-image在<table>上，务必加border-collapse: collapse，否则双线边框会让背景图在缝隙处重复或错位 - 路径错误是最常被忽略的点：检查浏览器开发者工具 Network 标签页，确认图片返回 200 而非 404；相对路径以 HTML 文件位置为基准，不是 CSS 文件位置
真正难的不是写对那几行 CSS，而是当背景图和文字、边框、rowspan/colspan 同时存在时，background-origin、background-clip 和盒模型之间的相互作用很容易被低估。动手前先在 DevTools 里临时删掉其他样式，只留背景相关属性，验证是否真生效。
