bg-fixed 不是真视差，仅是背景“不动”错觉；真视差需 javascript 驱动 transform 或 css 分层，否则在 ios safari 失效、next.js 中与 next/image 冲突、滚动易跳变。
bg-fixed 不是视差，只是背景“不动”的错觉；真视差必须靠 JavaScript 驱动 transform: translateY() 或 CSS 分层，否则在 iOS Safari 里直接失效、Next.js 里和 next/image 冲突、滚动时还容易跳变。
为什么 bg-fixed + bg-cover 总是不生效
常见现象：加了类但背景图照样跟着滚；iOS 上完全没反应；Next.js 页面一刷新就错位。
-
bg-fixed要求容器有明确高度（比如min-h-[100dvh]），不能是h-auto或 flex 子项未设flex-1 - 父级若有
overflow: hidden、transform: translateZ(0)或任何创建 stacking context 的样式，bg-fixed就会断锚 - iOS Safari 对
background-attachment: fixed支持为零，不报错也不执行，真机必测 -
next/image是<img>元素，不支持 background 属性；给外层 div 加bg-fixed，图本身仍随文档流滚动
用 clip-path + position: fixed 套 next/image
这是 Next.js 项目里唯一能兼顾图片优化与固定视觉的方案——让 next/image 自身 fixed，再用父容器裁剪出“窗口”。
- 外层容器设
relative overflow-hidden，作为视口边界 - 内部
next/image设fixed inset-0 object-cover，宽高拉满视口 - 用
clip-path: inset(0)（或响应式inset(0 0 0 0)）确保只显示容器区域内部分 - 必须加
priority和loading="eager"，否则首屏加载延迟会导致闪白
div.relative.overflow-hidden
next-image.fixed.inset-0.object-cover.priority.loading-eager
// 图片会固定在视口，内容在其上滚动，形成视差感
真正可控的视差：用 IntersectionObserver 驱动 transform
比监听 scroll 更轻量，兼容性好，且能精确控制偏移比例（比如 0.25x 滚动速度）。
- 给背景容器加
relative overflow-hidden，内部用absolute inset-0的div承载图片（可用next/image+layout="fill"） - 用
IntersectionObserver监听该容器进入视口，回调中计算：y = (window.innerHeight - entry.boundingClientRect.top) * 0.25 - 设
el.style.transform = `translateY(${y}px)`，并加will-change: transform防 iOS 掉帧 - 退出视口时记得重置
transform，否则可能残留位移
最易被忽略的一点：所有方案都依赖容器尺寸稳定。如果背景区在 flex 或 grid 里没显式撑高，min-h-[100dvh] 也救不了——得查 computed height 是否真的 > 0。真机测试永远比 DevTools 里的模拟器更真实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
