table 元素直接加 background-image 无效，因其为透明容器且 tr 不支持背景，td 会覆盖父级背景；应改设 td 或 tbody 的 background-image，并注意 background-repeat、background-size、background-origin 等属性配合。
table 元素直接加 background-image 为什么没效果？
因为 table 默认是「透明容器」，背景图会被子元素（尤其是 tr 和 td）遮盖——tr 在 CSS 中不接受 background-image，而 td 会继承或覆盖父级背景。直接写 <table style="background-image: url(...)..."> 基本无效。
正确做法：给 tbody 或所有 td 统一设 background
最稳的路径是绕过 tr，把背景图落到 td 或 tbody 上。优先推荐给 td 设定，避免因浏览器对 tbody 渲染差异导致背景错位：
-
td设置background-image后，记得加background-repeat: no-repeat和background-size: cover控制显示效果 - 若想整表统一底图（非单元格各自贴图），用
tbody更合适，但需确保tbody高度撑满，否则背景只在有内容的行区域显示 - 避免给
table加border-collapse: collapse后再设背景——它会让td边框合并，可能裁切背景图边缘
table.my-table td {
background-image: url('grid-bg.png');
background-repeat: repeat;
background-position: center;
}
背景图和边框、文字共存时的常见冲突
当 td 有 border 或 padding，背景图默认从内边距起点绘制，容易被遮挡或偏移。关键调整点：
- 用
background-origin: padding-box（默认值）确保背景从内边距左上角开始；若要从边框内侧起始，改用border-box - 文字颜色必须与背景图明暗反差足够，否则可读性崩坏；建议用
background-color: rgba(255,255,255,0.8)叠一层半透蒙版再放文字 - 如果表格用了
th标题行，别忘了单独设置其背景，否则可能沿用td的图导致语义混乱
响应式下 background-size 怎么选？
固定尺寸图在缩放时极易拉伸或留白。实际项目中按场景选：
立即学习“前端免费学习笔记（深入）”；
- 装饰性平铺图（如噪点、斜线）→
background-repeat: repeat+background-size: 8px 8px - 全表氛围图（如渐变纹理）→
background-size: cover，但需配合background-attachment: fixed防滚动撕裂（注意 Safari 对 fixed 在 table 内支持弱） - 图标类小图定位 → 用
background-position: right 4px center精确锚点，别依赖百分比
真正麻烦的是图片加载失败时的降级——background-image 不触发 onerror，得靠 JS 监听或提前用 SVG 占位。
