index.html里如何添加网页背景图片的固定效果？-html教程-PHP中文网

background-attachment: fixed 失效主因是 body 未占满视口，需同时设置 html, body { height: 100%; margin: 0; padding: 0; } 且 background-attachment 必须写在 body 上。

index.html里如何添加网页背景图片的固定效果？

直接加 background-attachment: fixed 就行，但只写这一句大概率失效——因为 body 默认高度不够，且存在默认 margin。

为什么 background-attachment: fixed 不生效？

最常见原因是：body 没占满视口（viewport），而 background-attachment: fixed 是相对于视口定位的。如果 body 高度只有内容那么高，背景图就只能固定在那一小块区域里，一滚动就“消失”。

典型表现：图片只在首屏显示，往下滚就变白；或整页背景压根不出现。

必须同时设置 html, body { height: 100%; margin: 0; padding: 0; }
body 单独设 height: 100vh 有时也不够——比如内容超出一屏时，100vh 只撑开首屏，后续区域无背景
移动端 Safari 对 fixed 背景支持不稳定，尤其配合 overflow: hidden 或 transform 时

推荐的最小可用 CSS 写法

把这段塞进 <style></style> 或外部 CSS 文件里，路径换成你自己的图片：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: url('bg.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

注意：background-attachment: fixed 必须写在 body 上，不能只写在 html；也不能用 div 模拟背景再设 position: fixed——那样会脱离文档流，影响滚动锚点和可访问性。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

路径和加载失败怎么办？

图片不显示，90% 是路径问题。相对路径以 HTML 文件为基准，不是以 CSS 文件位置为准（除非你用的是外部 CSS 且没调整路径）。

内联样式中写 url('images/bg.jpg')，表示和 index.html 同级的 images/ 目录下
外部 CSS 中写 url('../images/bg.jpg')，表示从 CSS 文件所在目录往上退一级再进 images/
加 background-color: #eee 作后备色，避免图片加载失败时一片空白
别用中文路径或空格，浏览器解析容易出错

移动端 fixed 背景卡顿或失效？

iOS Safari 和部分安卓 WebView 会禁用或降级 background-attachment: fixed 以保性能，尤其在页面有 transform、will-change 或复杂滚动时。

务实解法：

用媒体查询降级：@media (max-width: 768px) { body { background-attachment: scroll; } }
改用 position: fixed 的 img 标签 + z-index: -1，但要手动处理 object-fit: cover 和宽高适配
接受它“不固定”，优先保证加载速度和文字可读性——全屏背景图在手机上本就容易干扰内容

真正难的不是加那行 CSS，而是判断什么时候不该加。背景图固定是视觉技巧，不是功能刚需；一旦影响滚动流畅性或文字对比度，就得砍掉。