table 元素直接设置 background-image 无效，因其默认 border-collapse: separate 导致单元格间隙割裂背景，且子元素背景色会覆盖；应设于 tbody 或 tr 并配合 collapse、transparent 单元格背景及 cover 缩放。
table 元素直接设置 background-image 为什么无效？
因为 table 默认的 border-collapse 为 separate，单元格（td/th）自带边框间隙和 padding，背景图会被这些空隙“割裂”，甚至完全不可见；更关键的是，若子元素（如 tr、td）有显式背景色或默认白色背景，会直接盖住 table 的背景图。
正确做法：把背景图设在 tbody 或 tr 上
最稳定的方式是避开 table 本身，把背景图应用到 tbody 或 tr —— 它们能完整覆盖行区域，且不受单元格间隙干扰。前提是确保 td 没有覆盖性背景色：
-
td和th的background-color必须为transparent（或未设置） -
table和tr的border-collapse: collapse要统一设置，消除间隙 - 图片路径用相对或绝对 URL，推荐加
background-size: cover防止拉伸失真
table {
border-collapse: collapse;
}
tbody {
background-image: url("bg-pattern.png");
background-size: cover;
background-repeat: no-repeat;
}
td, th {
background-color: transparent;
padding: 8px;
}
兼容性差的 hack：用伪元素覆盖 table
如果必须保留 table 自身背景图（比如要响应式缩放），可用 ::before 伪元素强行叠加：
- 给
table设position: relative - 伪元素设
position: absolute、top: 0、left: 0、width: 100%、height: 100% - 务必加
z-index: -1，否则会遮挡表格内容 - 注意：IE 不支持
table::before，此法仅适用于现代浏览器
容易被忽略的细节：background-attachment 和尺寸计算
background-attachment: fixed 在 table 或 tbody 上基本无效——滚动时不会固定，因为表格内部不触发独立层叠上下文；另外，background-size: 100% 100% 会让图片拉伸变形，优先用 cover 或 contain。还有，如果表格内容高度远小于图片高度，背景可能只显示顶部一小块，这时需要给 tbody 显式设 min-height 或用 background-position: center center 居中锚定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
