如何利用HTML制作全屏视差背景_通过CSS background-attachment:fixed应用-html教程-PHP中文网

background-attachment: fixed 在桌面端需满足严格条件才能生效：背景必须设在无transform父容器的全屏元素上，显式声明height: 100vh，并用媒体查询限制鼠标设备；移动端应改用sticky伪元素或scroll-driven animation。

如何利用html制作全屏视差背景_通过css background-attachment:fixed应用

background-attachment: fixed 在现代桌面浏览器中确实能实现视差效果，但直接写在任意 section 上大概率失效——它不绑定你写的那个元素，而是锚定到 html 或最近的层叠上下文容器。

为什么 background-attachment: fixed 总是“不动”或“跟着滚”

这个属性实际绑定的是视口坐标系，但浏览器会向上查找最近的「有堆叠上下文的祖先」作为锚点。常见干扰源包括：

transform、filter、will-change、opacity（哪怕只是 opacity: 0.99）都会触发新层叠上下文，导致 fixed 退化为 scroll
overflow: hidden 或 position: sticky 的父容器会切断合成层判定
移动端（iOS Safari / Android WebView）基本无视该属性，DevTools 里显示 fixed，但计算值已是 scroll
如果 body 没设 margin: 0 或 html 缺少 height: 100%，100vh 可能塌陷，锚点丢失

让 fixed 真正在桌面端生效的硬性条件

想让它稳定工作，必须同时满足以下全部条件：

html-deploy

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

下载

背景图直接设在 body 上（最可靠），或一个独立全屏块（如 .parallax-section），且该元素不能嵌套在任何带 transform 的父容器中
显式声明 height: 100vh（不是 min-height），否则滚动锚点失效
配套写全：background-size: cover、background-position: center center、background-repeat: no-repeat
用媒体查询做设备区分：@media (hover: hover) and (pointer: fine) { .parallax-section { background-attachment: fixed; } }，只对鼠标设备启用

移动端 fallback：用伪元素 + position: sticky 模拟

比 JS 更轻量、兼容性更好，且不依赖滚动监听：

必须用 ::before 或 ::after 伪元素承载背景，普通元素加 position: sticky 对背景无效
top: 0 是必需的，否则 sticky 不生效
父容器高度必须明确（如 height: 100vh），且不能有 overflow: hidden 或 transform
加 pointer-events: none 防止伪元素拦截点击

section.parallax-section {
  height: 100vh;
  position: relative;
}
section.parallax-section::before {
  content: "";
  position: sticky;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
  pointer-events: none;
}