table 或 td 上 background-attachment: fixed 无效，因 css 规范限定该属性仅对根元素或 overflow: hidden 的块级容器生效；可行方案是用 body::before 等伪元素模拟固定背景，需设 pointer-events: none、z-index: -1、background-size/position 正确，并在 table 溢出时用 js 动态调整位置。
background-attachment: fixed 在 table 上根本无效
直接给 table 或 td 元素加 background-attachment: fixed 不会起作用——CSS 规范明确限定该属性只对根元素（html）或设置了 overflow: hidden 的块级容器生效，而表格相关元素不属于可锚定到视口的合法上下文。
你看到背景图随滚动一起动，不是写错了，是浏览器压根不解析这个声明。DevTools 里能看到该样式被划掉（invalid），但不报错，容易误判为兼容性问题。
-
background-attachment: fixed只在body、html或带overflow: hidden+position: relative的容器上可能生效 - 表格单元格（
td、th）是表格渲染模型的一部分，不参与常规层叠上下文锚定逻辑 - 即使强行套用，iOS Safari 和 Android Chrome v56+ 也会静默忽略，连降级提示都没有
想让表格区域有“固定背景”，得换思路：用伪元素盖住 table
真正可行的做法是把 table 当作前景内容，用 body::before 或独立 div 做视觉背景层，再通过定位和层级控制让它“看起来”固定在表格背后。
关键不是给 table 设背景，而是让背景层与 table 同宽高、同滚动关系，并且不干扰交互。
- 必须设
body { margin: 0; }，否则body::before会因默认外边距错位 -
body::before要加pointer-events: none，否则鼠标点不到 table 单元格 -
z-index: -1是硬性要求，缺了就会盖住整个表格 -
width和height必须用%（不用vw/vh），否则 iOS 横屏时右侧漏白
表格本身需要显式设置 overflow 才能触发伪元素对齐
如果 table 内容超出视口、出现横向或纵向滚动条，伪元素的 100% width/height 就不再匹配实际可视区域——它仍按 viewport 尺寸铺满，导致背景偏移或裁剪。
此时不能靠 CSS 自动适配，必须用 JS 动态修正：
- 监听
table.parentElement.scrollLeft和scrollTop - 用
transform: translateX()/translateY()微调body::before的位置 - 注意节流，避免频繁重排；移动端尤其要防 touchmove 触发过载
- 仅当 table 父容器设置了
overflow: auto且实际溢出时才需此步
background-size 和 background-position 不是锦上添花，是功能前提
很多人写了伪元素却看到图片只露左上角、拉伸变形或居中失效，问题几乎都出在这两个属性没配齐或配错值。
-
background-size: cover是最常用选择：等比缩放填满，适合大图，但边缘可能被裁剪 -
background-size: contain适合 logo 类小图，确保完整显示，但必然留白 -
background-position: center center必须写全，center单写等价于center center，但部分旧引擎解析不稳 - 千万别用
background-size: 100% 100%—— 强制拉伸会失真，且不同屏幕宽高比下形变程度不可控
伪元素方案看似多写几行，但它绕过了浏览器对 background-attachment 的限制，也避开了 transform/filter 导致的降级陷阱。真正麻烦的从来不是代码量，而是漏掉 pointer-events: none 或 z-index: -1 这类“看不见”的细节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
