如何利用HTML实现简单的滚动视差_通过CSS background-attachment技巧-html教程-PHP中文网

能用 background-attachment: fixed 实现视差就别写 js，但必须同时满足三个硬性条件：加 -webkit-background-attachment: fixed、父容器不能有 transform/filter/will-change、元素高度必须写死（如 100vh），否则在 safari 或安卓 webview 中失效。

如何利用html实现简单的滚动视差_通过css background-attachment技巧

能用 background-attachment: fixed 实现的视差，就别写 JS —— 但必须满足三个硬性条件，否则在 Safari 或安卓 WebView 上直接失效。

为什么 background-attachment: fixed 在手机上不动

这不是你代码写错了，是 iOS Safari（≤15）和部分安卓 WebView 主动禁用该属性，防止滚动卡顿。即使写了 background-attachment: fixed，真机上 computed styles 里它可能直接被标为 invalid。

必须加 -webkit-background-attachment: fixed，仅靠标准写法不够
父容器不能有 transform、filter 或 will-change，否则触发新层叠上下文，fixed 失效
元素高度不能是 height: auto，得写死，比如 height: 100vh（min-height 不够稳定）
避免在 position: sticky 或 overflow: hidden 的父容器里使用，背景会被裁切或降级为 scroll

必须写的 CSS 属性组合

单独写 background-attachment: fixed 没用，它依赖配套样式才能生效。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

background-image 必须设在块级元素上，不能是 <img> 标签（对替换元素无效）
必须配 background-size: cover 和 background-position: center，否则图会拉伸或偏移
加 transform: translateZ(0) 或 will-change: transform 强制硬件加速，修复 iOS 卡顿和错位
图片分辨率建议 ≥ 1920×1080px，缩放时才不易糊

.parallax-section {
  height: 100vh;
  background-image: url('bg.jpg');
  background-attachment: fixed;
  -webkit-background-attachment: fixed;
  background-position: center;
  background-size: cover;
  transform: translateZ(0);
}

移动端 fallback 到 JS 的临界点

当你发现 background-attachment: fixed 在真机上完全没反应，或者只在桌面端有效，就得立刻降级到 JS 方案 —— 别硬扛。

监听 scroll 事件时，只缓存 window.scrollY，不要在里面改样式
用 requestAnimationFrame 批量更新 transform: translateY()，避免掉帧
偏移量用 -scrollY * 0.3 这类系数控制速度，“0.3”越小越像远处背景，“0.8”越近越快
移动端还要监听 touchmove 并调用 event.preventDefault()，否则 window.scrollY 冻结；同时必须设 { passive: false }