table 元素上直接设置 background-image 常不显示，因 td/th 默认白色背景会遮盖表格背景；解决方法是外包 div 容器或作用于 tbody/thead，并注意 background-size 和 repeat 的合理搭配。
background-image 直接写在 <table> 上基本没用，这不是你代码写错了，而是浏览器渲染逻辑决定的。
为什么 table { background-image: url(...) } 常常不显示
因为 <table> 默认是透明容器，而它的子元素（<tr>、<td>）在未显式设置时，浏览器会按规范赋予默认白色背景 —— 这层白底直接盖住了表格本身的背景图。哪怕你只写了 background-image，没碰 background-color，<td> 也照样“挡光”。
- 检查是否无意中给
<td>或<th>设了background-color（哪怕是#fff或white） - 确认父容器没加
overflow: hidden或transform，否则可能裁掉背景渲染区域 - 如果用了
border-collapse: collapse，旧版 Chrome 可能对<table>背景渲染异常，可加background-clip: padding-box补救
真正起作用的两种写法（推荐选第一种）
核心思路就一个：绕过 <td> 的遮挡，把背景挂到它管不到的地方。
-
外包一层
<div>：给容器设background-image，再让<table>自身透明<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> -
作用于
<tbody>或<thead>：它们不自带背景，默认透出，适合局部水印或表头装饰<table> <thead style="background-image: url('watermark.png'); background-repeat: no-repeat; background-position: center;"> <tr><th>Name</th><th>Score</th></tr> </thead> <tbody>...</tbody> </table>
background-size 和 background-repeat 怎么选才不翻车
表格不是海报，背景图尺寸和重复方式直接影响文字可读性。
立即学习“前端免费学习笔记（深入）”；
-
background-size: cover容易裁剪关键区域，尤其当表格高度动态变化时；contain又常留大片空白 —— 对表格更稳妥的是固定尺寸平铺，比如background-size: 16px 16px -
background-repeat: repeat是默认值，但小图平铺极易干扰文字识别；若只想要左上角一个 logo，必须写no-repeat并配background-position: top left - 避免用
background-attachment: fixed：表格滚动时，固定背景会和内容错位，视觉割裂感强
最麻烦的从来不是加背景图，而是加完之后发现某列文字看不清、某行背景被截断、或者换台设备就消失 —— 这些问题几乎都出在没处理好 <td> 的默认背景和容器层级关系上。
