给直接加background-image常失效，因其透明背景会被等子元素默认白色背景遮盖；可靠做法是外包容器设背景并设table为transparent，或作用于/。
直接给 <table> 加 <code>background-image 为什么经常失效
因为 <table> 默认是「透明容器」，它的背景会被子元素（比如 <code><tr>、<code><td>）的背景完全遮盖——哪怕你没显式设背景色，浏览器也会按规范给 <code><td> 渲染一个默认的白色背景。所以光在 <code><table> 上写 <code>background-image，基本看不到效果。
- 检查是否给
<td> 或 <code><th> 设置了 <code>background-color（包括transparent以外的任何值） - 确认
<table> 没被父容器的 <code>overflow: hidden或transform截断背景渲染区域 - 如果用了
border-collapse: collapse，部分旧版 Chrome 对表格背景渲染有偏差，建议加background-clip: padding-box - 推荐做法 —— 包一层
<div> 容器：给 <code><div class="table-bg"> 设 <code>background-image，再把<table> 放进去，并设 <code>background-color: transparent；这样背景图不会被表格内容“顶掉”- 替代做法 —— 直接作用于
<tbody> 或 <code><thead>：它们比 <code><tr> 更高一级，且不自带背景，默认透出，适合局部背景（如表头水印） <pre class="brush:php;toolbar:false;"> <div style="background-image: url('grid.png'); background-size: 20px 20px;"> <table style="background-color: transparent;"> <tr><td>A</td><td>B</td></tr> </table> </div></pre> <h3> <code>background-size和background-repeat的实际影响表格背景图不是装饰画，尺寸和重复行为直接影响可读性。小图平铺容易干扰文字识别，大图不重复又可能只覆盖左上角。
- 用
background-size: 100% 100%会拉伸填满整个容器，但可能失真；更安全的是background-size: 16px 16px配合background-repeat: repeat - 如果图是带纹理的半透明 PNG，建议加
background-color: rgba(255,255,255,0.8)在容器上，避免文字发虚 - 避免用
background-attachment: fixed—— 表格滚动时，背景会错位甚至卡顿
兼容性与性能要注意的点
桌面端基本没问题，但移动端 Safari 对表格内嵌背景图的渲染边界偶尔有偏移；另外，大图或未压缩的背景图会拖慢首次渲染。
立即学习“前端免费学习笔记（深入）”；
- 优先用 WebP 或压缩后的 PNG，尺寸控制在 2KB 以内（尤其用于平铺的小图）
- 不要在
<table> 上同时设 <code>background-image和box-shadow—— 某些 Android WebView 会丢弃背景 - 如果表格用了
position: sticky头部，背景图必须挂在<div> 容器上，否则粘性定位会破坏背景层叠上下文 <p>真正难的不是加图，而是让图待在它该待的位置，不抢焦点、不压字、不闪动。调一次 <code>background-clip和多看一眼computed style里的实际背景生效节点，比反复换图源管用得多。
- 替代做法 —— 直接作用于
让背景图真正显示出来的两个可靠做法
核心思路：要么把背景图挂到最外层可控制的容器上，要么确保单元格自身不遮挡它。
