bg-fixed 在 Tailwind 中常失效，因其依赖层叠上下文与滚动容器关系：父容器未设 overflow-y、元素未建新层叠上下文、或在 flex/grid/绝对定位中被重置；可靠方案是用 JavaScript 驱动 transform 视差。
bg-fixed 在 Tailwind 中为什么经常失效
因为 bg-fixed 依赖元素的「层叠上下文」和「滚动容器」关系，不是加了就生效。常见现象是背景纹丝不动，像普通 bg-scroll 一样随内容滚动。
关键原因有三个：
- 父容器没设
overflow-y: auto或overflow-y: scroll，浏览器默认滚动的是body，而bg-fixed只在「当前滚动容器内」固定 —— 但body上的bg-fixed在多数现代浏览器（Chrome/Firefox）中已被禁用或降级处理 - 元素没有建立新的层叠上下文（比如缺
transform: translateZ(0)、will-change: transform或opacity: 0.99），导致背景图被“钉”在视口外层，实际不可见 - Tailwind 的
bg-fixed编译后是background-attachment: fixed，但它对 flex/grid 容器子项、绝对定位元素等场景非常敏感，稍不注意就被重置
真正能用的视差实现：用 transform + scroll event 模拟
原生 bg-fixed 不可靠，生产环境推荐用 JavaScript 驱动的轻量视差 —— 不依赖 CSS 层叠规则，可控性强，兼容性好。
核心思路：监听 window.scrollY，按比例移动背景层的 transform: translateY()，速度比滚动慢，就产生视差感。
立即学习“前端免费学习笔记（深入）”；
- 给背景容器设
position: relative和overflow: hidden，避免子元素溢出干扰 - 背景图用
absolute子元素承载，宽高 100%，top: 0; left: 0;，再用transform: translateY()动态偏移 - 偏移量公式建议用
scrollY * 0.3（系数越小，视差越弱；0.5 以上容易晕，0.1–0.4 更稳妥） - 务必加
will-change: transform到背景图元素，否则 iOS Safari 和旧版 Chrome 会掉帧
示例片段：
const parallaxEl = document.querySelector('.parallax-bg')
window.addEventListener('scroll', () => {
const y = window.scrollY * 0.3
parallaxEl.style.transform = `translateY(${y}px)`
})用 IntersectionObserver 省掉 scroll 事件监听
直接绑 scroll 事件在长页面里容易卡顿，尤其低端安卓机。更优解是用 IntersectionObserver 监听元素进入/离开视口，再触发一次性的位移计算。
适用场景：只在某一块区域（比如 banner 区）需要视差，其他地方不需要响应滚动。
- 把背景图容器设为
intersection-root的目标，threshold: [0]即可捕获任意进入状态 - 回调里读取
entry.boundingClientRect.top和window.innerHeight，算出相对滚动位置，再推导偏移量 - 比起持续监听
scroll，它只在元素进出时触发，CPU 占用低，也不用防抖节流 - 注意：不能用于「全程连续视差」，只适合「局部区域启用」的场景
Tailwind 配合视差的实用 class 组合
别指望单靠 bg-fixed，但可以配合 JS 实现更干净的结构。这些 class 经常一起出现：
-
relative overflow-hidden：包裹容器必须加，否则absolute背景图会脱出布局 -
absolute inset-0 w-full h-full bg-cover bg-center：背景图元素的标准配置，inset-0替代top-0 left-0 w-full h-full -
will-change-transform：Tailwind 默认不带这个，需在tailwind.config.js的theme.extend.transform里手动加will-change: ['transform']，然后用will-change-transform - 避免用
bg-no-repeat—— 视差中背景图需横向延展，重复反而暴露接缝；改用bg-repeat-x或确保图够宽
复杂点在于：视差不是「开个开关」的事，它本质是滚动位置、图层层级、渲染性能三者的权衡。很多人卡在第一步——连背景图都看不到，其实是 z-index 或 overflow 没配对，而不是 JS 写错了。
