网页背景图片固定设置方法详解

本文深入解析了如何在网页中实现背景图片的固定效果（background-attachment: fixed），不仅提供了内联CSS和外部样式表两种实用代码方案，更关键的是直击开发者常遇的“固定失效”痛点——明确指出根本原因在于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 写法

把这段塞进