在 index.html 中添加网页背景图片的固定效果，可以通过 CSS 实现。以下是具体步骤和代码示例：✅ 方法：使用 CSS 的 background-attachment: fixed;

2026-05-21 20:40:04 0浏览 收藏

想为网页添加酷炫的固定背景图效果？关键不在简单写上 `background-attachment: fixed`，而在于解决它“经常失效”的真正痛点——body 未占满视口、路径错误、移动端兼容性差以及性能隐患；本文手把手教你用最小可靠代码（含 html/body 高度重置、路径规范、降级方案）实现稳定生效的视差式背景，同时坦诚指出：在手机端尤其 iOS Safari 上，固定背景常被浏览器主动降级，此时优先保障流畅滚动和内容可读性，比执着于视觉特效更重要。

直接加 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 写法

把这段塞进 🔍 说明：background-image: 设置背景图片路径。background-size: cover: 让图片覆盖整个页面，保持比例。background-position: center: 图片居中显示。background-attachment: fixed: 使背景图片固定，不随页面滚动而移动。📌 注意事项：图片路径要正确，建议使用绝对路径或相对路径。如果页面内容》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！