真可用的方案只有两种：CSS clip-path + position: fixed 套图，或用 IntersectionObserver 驱动 transform: translateY()；前者轻量兼容好，后者可控支持变速比但需防 iOS 掉帧。
不能只靠 bg-fixed 实现移动端卡片滑动视差——iOS Safari 完全不支持，Next.js 里还和 next/image 冲突，滚动会跳变。真可用的方案只有两种：CSS clip-path + position: fixed 套图，或用 IntersectionObserver 驱动 transform: translateY()。前者轻量、兼容性好；后者可控、支持变速比，但需注意 iOS 掉帧。
为什么 bg-fixed 在移动端彻底失效
加了 bg-fixed bg-cover 但背景图照样跟着滚？不是你写错了，是浏览器根本不执行。iOS Safari 对 background-attachment: fixed 的支持为零——不报错、不警告、也不渲染。DevTools 里看 computed 样式一切正常，真机一测就露馅。Next.js 场景下更糟：next/image 是 <img> 元素，不接受 background 属性；给外层 div 加 bg-fixed，图片本身仍随文档流滚动，根本形不成视差。
常见误判点：
- 以为
min-h-[100dvh]就够了——其实父容器若在 flex/grid 里没显式撑高，computed height 可能还是 0 - 给父级加了
overflow-hidden或transform: translateZ(0)——这会创建 stacking context，直接切断bg-fixed锚点 - 在 Next.js 中用
priority和loading="eager"漏掉——首屏加载延迟导致闪白，视差感断层
用 clip-path + fixed 实现真兼容卡片视差
这是目前唯一能在 iOS Safari、Android Chrome、Next.js SSR 环境下稳定工作的纯 CSS 方案。核心是让 next/image 自身 fixed，再用外层容器裁剪出“窗口”，内容在其上滚动，形成视觉差。
立即学习“前端免费学习笔记（深入）”；
关键结构与要点：
- 外层容器设
relative overflow-hidden，作为视口边界；必须有明确高度（如h-[500px]或min-h-[50dvh]） - 内部
next/image设fixed inset-0 object-cover，宽高拉满整个视口 - 用
clip-path: inset(0)（或响应式clip-path: inset(0 0 0 0)）确保只显示容器区域内部分 - 必须加
priority和loading="eager"，否则首屏加载慢，固定图还没到位，内容先滚过去了
示例结构：
<div class="relative overflow-hidden h-[500px]">
<Image
src="/card-bg.jpg"
fill
className="fixed inset-0 object-cover"
priority
loading="eager"
/>
<div class="relative z-10 flex items-center justify-center h-full">
<div class="bg-white/80 p-6 rounded-xl">
<h2>卡片标题</h2>
</div>
</div>
</div>用 IntersectionObserver 控制卡片层偏移比例
如果需要精确控制视差速度（比如卡片背景以 0.3x 速度滚动），就得用 JS。相比监听 scroll，IntersectionObserver 更轻量、兼容性好、且不会阻塞主线程。
实操要点：
- 给卡片容器加
relative overflow-hidden，内部用absolute inset-0的div承载背景（可用next/image+layout="fill"） - 监听该容器进入视口，回调中计算偏移：
y = (window.innerHeight - entry.boundingClientRect.top) * 0.3 - 设
el.style.transform = `translateY(${y}px)`，并加will-change: transform防 iOS 掉帧 - 容器退出视口时，记得重置
transform，否则残留位移会导致后续滚动错乱
性能提示：不要对每个卡片都开一个 observer，把多个卡片归到同一组，共享同一个 callback，减少观察器数量。
最易被忽略的一点：所有方案都依赖容器尺寸稳定。如果卡片区域嵌在 flex 或 grid 里，又没设 flex-1 或 min-h- 类，那无论你怎么调 bg-fixed 或 clip-path，它都只是个空盒子——真机测试永远比 DevTools 里的模拟器可靠。
