background-attachment: fixed 在移动端完全不支持，iOS Safari 和多数安卓 WebView 主动禁用该属性以保障滚动性能；可靠替代方案是使用 body::before 伪元素配合 position: fixed 实现视口固定背景，需设置 content、四边定位、z-index: -1、pointer-events: none 及 background 相关属性。
background-attachment: fixed 能实现背景图固定，但只在部分桌面浏览器可靠；iOS Safari 和多数安卓 WebView 完全不支持，且现代 Chrome 会因父容器触发层叠上下文而静默失效。别硬套，先看场景再选方案。
为什么 background-attachment: fixed 经常没反应
不是你代码写错了，是浏览器主动忽略它：
-
body或任意祖先元素用了transform、filter、will-change（哪怕只是transform: translateZ(0)），就会创建新层叠上下文，fixed退化为scroll -
html或body设置了height: 100vh+overflow: auto，会让body成为滚动容器，背景就“固定”在它内部了 - iOS 所有版本的 Safari（含 WKWebView）原生不支持该属性，无论写在哪都无效
- 目标元素不是
body，而是普通div，且没设overflow: hidden或显式高度，浏览器直接当无效值处理
移动端必须用伪元素模拟 fixed 效果
这是目前最稳定、兼容性覆盖 iOS/安卓/旧版 Chrome 的方案，本质是用 body::before 创建一个独立固定图层：
- 清除
body默认margin：否则伪元素会错位 8px - 伪元素必须设
position: fixed+top: 0; left: 0; width: 100%; height: 100% - 加
z-index: -1确保内容自然盖在上面，不用给内容层额外加z-index - 必须加
pointer-events: none，否则伪元素会拦截所有点击和滚动事件 -
background-size: cover和background-position: center center仍要配齐，否则图会拉伸或偏移
body {
margin: 0;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -1;
pointer-events: none;
}
局部容器（比如表格、卡片）里怎么固定背景
不能直接对 table 或 div 设 background-attachment: fixed——它只对根容器或 overflow: hidden 容器生效。正确做法是用伪元素锚定到该容器：
立即学习“前端免费学习笔记（深入）”；
- 给容器设
position: relative，作为伪元素的定位参考 - 伪元素用
position: absolute（不是fixed），并撑满容器尺寸 - 背景图路径和缩放规则同上，但注意
background-size: cover是相对于该容器尺寸计算的 - 若容器本身可滚动（如带
overflow-y: auto），伪元素需同步监听滚动并动态修正top值，否则会出现错位
.table-container {
position: relative;
height: 400px;
overflow-y: auto;
}
.table-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
z-index: -1;
}
真正难的不是写几行 CSS，而是判断当前环境是否允许用 fixed —— 桌面端可试，移动端一律走伪元素；只要页面用了 transform 或 filter，就默认 fixed 失效，别等上线才发现背景跟着滚。
