background-attachment: fixed 在现代浏览器中未失效，但被限制在根元素或启用合成层的容器上才生效；ios safari等主动禁用非根元素该属性以避免卡顿。
background-attachment: fixed 在现代浏览器中为什么失效了
它没“失效”，但被限制在根元素（html）或启用了合成层的容器上才真正生效。iOS Safari 和 Chrome for Android 从某个版本起，默认禁止非根元素使用 background-attachment: fixed，因为会导致滚动卡顿和内存压力——这是浏览器主动降级，不是你写错了。
常见错误现象：div 设了 background-attachment: fixed，背景却随内容一起滚动；DevTools 里属性明明亮着，但视觉无反应。
- 只对
html或body元素设置时最可靠（但要注意body默认有 margin，可能造成意外偏移） - 若必须用在子容器，需同时满足：该容器有
transform: translateZ(0)或will-change: transform（触发 GPU 合成层） - 不能和
overflow: hidden或contain: layout冲突，后者会截断固定定位的渲染上下文
如何让 fixed 背景在滚动容器里真正“钉住”
当你要实现一个局部区域（比如侧边栏、卡片）拥有固定背景，而页面其余部分正常滚动时，background-attachment: fixed 基本不可靠。得换思路：用伪元素 + position: fixed 模拟。
核心做法是把背景图抽离到 ::before，设为固定定位，并手动对齐到目标容器的可视区域位置。
section {
position: relative;
height: 400px;
}
section::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("bg.jpg");
background-size: cover;
z-index: -1;
/* 手动计算偏移，使其视觉上“贴”在 section 区域 */
transform: translateX(calc(-50vw + 50%));
}
注意：transform: translateX(...) 这行是为了抵消 position: fixed 相对于视口定位带来的错位——因为 fixed 是相对于整个窗口，不是父容器。
替代方案：用 JS 监听 scroll 实时更新 background-position
当兼容性要求高（尤其要支持 iOS 微信内置浏览器），或者需要更精细控制（比如视差倍率），CSS 方案就力不从心了。此时用 JS 动态算 background-position 是最稳的兜底方式。
关键点不是“加监听”，而是避免滚动抖动：
- 用
requestAnimationFrame节流，别直接绑scroll事件 - 只读取
window.scrollY，别反复查 DOM 偏移（性能杀手） - 计算公式通常是：
background-position: 50% calc(50% + scrollY * 0.5)（0.5 是视差系数）
示例片段：
let lastY = window.scrollY;
function updateParallax() {
const y = window.scrollY;
const delta = y - lastY;
document.querySelector(".parallax-bg").style.backgroundPositionY = `calc(50% + ${y * 0.3}px)`;
lastY = y;
}
window.addEventListener("scroll", () => requestAnimationFrame(updateParallax));
移动端适配 fixed 背景的三个硬约束
哪怕你用对了所有 CSS，iOS 上仍可能白屏或闪动。这是因为 Safari 对 fixed 背景做了额外限制：
-
background-image尺寸不能超过设备屏幕宽高的 2 倍（超大会被静默降级为scroll） - 不能用
background-clip: text或mask-image等混合效果，会直接禁用 fixed 行为 - 开启
viewport的user-scalable=no有时反而能恢复 fixed 效果（怪但真实）
真正在意体验的话，别赌 background-attachment: fixed 的跨端一致性——它从来就不是个“开箱即用”的功能，而是个需要层层校验的妥协方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
