如何用HTML编辑网页实现背景图片固定不滚动的效果-html教程-PHP中文网

background-attachment: fixed 在移动端完全不支持，ios safari 和多数安卓 webview 主动禁用该属性以保障滚动性能；可靠替代方案是使用 body::before 伪元素配合 position: fixed 实现视口固定背景，需设置 content、四边定位、z-index: -1、pointer-events: none 及 background 相关属性。

如何用html编辑网页实现背景图片固定不滚动的效果

background-attachment: fixed 能实现背景图固定，但只在部分桌面浏览器可靠；iOS Safari 和多数安卓 WebView 完全不支持，且现代 Chrome 会因父容器触发层叠上下文而静默失效。别硬套，先看场景再选方案。

为什么 `background-attachment: fixed` 经常没反应

不是你代码写错了，是浏览器主动忽略它：

body 或任意祖先元素用了 transform、filter、will-change（哪怕只是 transform: translateZ(0)），就会创建新层叠上下文，fixed 退化为 scroll
html 或 body 设置了 height: 100vh + overflow: auto，会让 body 成为滚动容器，背景就“固定”在它内部了
iOS 所有版本的 Safari（含 WKWebView）原生不支持该属性，无论写在哪都无效
目标元素不是 body，而是普通 div，且没设 overflow: hidden 或显式高度，浏览器直接当无效值处理

移动端必须用伪元素模拟 `fixed` 效果

这是目前最稳定、兼容性覆盖 iOS/安卓/旧版 Chrome 的方案，本质是用 body::before 创建一个独立固定图层：

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

清除 body 默认 margin：否则伪元素会错位 8px
伪元素必须设 position: fixed + top: 0; left: 0; width: 100%; height: 100%
加 z-index: -1 确保内容自然盖在上面，不用给内容层额外加 z-index
必须加 pointer-events: none，否则伪元素会拦截所有点击和滚动事件
background-size: cover 和 background-position: center center 仍要配齐，否则图会拉伸或偏移

body {
  margin: 0;
}
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
}

局部容器（比如表格、卡片）里怎么固定背景

不能直接对 table 或 div 设 background-attachment: fixed——它只对根容器或 overflow: hidden 容器生效。正确做法是用伪元素锚定到该容器：

给容器设 position: relative，作为伪元素的定位参考
伪元素用 position: absolute（不是 fixed），并撑满容器尺寸
背景图路径和缩放规则同上，但注意 background-size: cover 是相对于该容器尺寸计算的
若容器本身可滚动（如带 overflow-y: auto），伪元素需同步监听滚动并动态修正 top 值，否则会出现错位

.table-container {
  position: relative;
  height: 400px;
  overflow-y: auto;
}
.table-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  z-index: -1;
}

真正难的不是写几行 CSS，而是判断当前环境是否允许用 fixed —— 桌面端可试，移动端一律走伪元素；只要页面用了 transform 或 filter，就默认 fixed 失效，别等上线才发现背景跟着滚。