HTML中怎么让背景图片不随着元素内容滚动-html教程-PHP中文网

background-attachment: fixed 经常失效是因浏览器主动限制，主因有三：祖先元素触发层叠上下文、html/body 未撑满视口、ios safari 自 ios 13 起彻底禁用；推荐用 body::before 伪元素模拟固定背景，兼容性最佳。

html中怎么让背景图片不随着元素内容滚动

直接用 background-attachment: fixed 大概率失效——尤其在 iOS Safari、带 transform 的父容器、或 body 有 overflow 时，它会被浏览器静默忽略。

background-attachment: fixed 为什么经常不生效

不是你写错了，是浏览器主动不执行。关键原因有三个：

body 或任意祖先元素设置了 transform（比如 translateZ(0)）、filter、will-change 或 opacity ，会创建新层叠上下文，让 <code>fixed 相对该容器而非视口定位
html 或 body 没撑满视口：比如用了 height: 100vh + overflow-y: scroll，此时 body 成为滚动容器，fixed 就“固定”在它内部
iOS Safari 从 iOS 13 起彻底禁用 background-attachment: fixed，无论写在哪都无效，这不是 bug，是 Apple 的明确限制

用 body::before 伪元素实现真正兼容的固定背景

这是目前最稳定、无需 JS、能覆盖所有主流环境（含 iOS）的方案。核心是绕过 background-attachment 的限制，用一个独立图层模拟固定效果：

必须清除 body 默认 margin，否则伪元素会错位 1px
z-index: -1 确保内容自然盖在背景上，不用给其他元素额外设 z-index
pointer-events: none 防止伪元素拦截点击和滚动事件
背景图尺寸控制靠 background-size: cover 和 background-position: center center，不能省

最小可用代码：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

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;
}

如果要固定的是某个局部容器（比如表格或卡片）的背景

不能对普通 div 直接套 background-attachment: fixed —— 它只在 body 或触发了 overflow: hidden 的全高容器里才可能稳定。更可靠的做法是：

给容器设 position: relative
用 ::before 伪元素，但定位改为 position: absolute（不是 fixed），并显式设置 top/left/width/height 覆盖容器区域
确保伪元素 z-index 低于内容层，避免遮挡

例如表格容器：

.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-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: -1;
}