最稳方案是html元素上设background、min-height: 100dvh、background-size: cover并用background-attachment: scroll；fixed易致兼容问题且需父级全链height: 100%或min-height: 100vh，ios中vh动态变化，dvh更可靠。
background-attachment: fixed 会导致背景不覆盖整个视口
用 background-attachment: fixed 时，背景图会相对于视口定位，但前提是元素本身得撑满视口。如果父容器没设高度、或被内容挤压，背景实际渲染区域就只是内容高度，不是全屏——这是最常被忽略的根源。
- 确保应用背景的元素是
html或body，且它们的height: 100%生效（需祖先链上所有父级都设height: 100%，或直接用min-height: 100vh） - 更稳妥的做法是把背景加在
html上：html { background: url(...) no-repeat center center; background-size: cover; background-attachment: fixed; min-height: 100vh; } - 注意
background-attachment: fixed在 iOS Safari 和部分安卓 WebView 中有渲染异常或性能问题，滚动时可能卡顿或错位
fixed 定位元素 + 四边为 0 不等于背景铺满
很多人写一个 div 设 position: fixed; top: 0; right: 0; bottom: 0; left: 0;，再塞 background-image，以为这就“全屏背景”了。但它只是占满视口，和真正的背景行为不同：它会遮挡其他内容、影响 z-index 层级、且无法响应 background-size: cover 的缩放逻辑（除非显式设 width/height）。
- 如果真要用 fixed 元素模拟背景，必须加
z-index: -1，否则会盖住页面内容 - 要让图片真正“覆盖”且自适应，得配合
object-fit: cover（用于img）或background-size: cover（用于div的 background） - fixed 元素在页面缩放（
transform: scale）或高 DPR 屏幕下可能出现边缘模糊或像素错位，原生 background 更稳定
vh 单位在移动端可能失效
height: 100vh 看似简单，但在 iOS Safari 和部分安卓浏览器中，地址栏收起/展开会触发 vh 值重算，导致背景突然跳变或留白。这不是 bug，是浏览器对视口高度的动态定义所致。
- 替代方案：用
min-height: 100vh+height: 100%组合，或 JS 动态设置style.height = window.innerHeight + 'px' - 若用 JS，记得监听
resize和orientationchange，但避免高频触发；iOS 还需处理scroll（因地址栏变化也触发 scroll） - CSS 新方案可尝试
env(height: 100dvh)（dvh是 dynamic viewport height），Chrome 105+、Safari 16.4+ 支持，更可靠
background-size: cover 和 contain 的实际裁剪差异
设了全屏背景后，cover 和 contain 表现天差地别。很多人只写 cover，却没意识到它一定会裁剪——哪怕图片比例和屏幕完全一致，只要存在 sub-pixel 渲染误差，边缘仍可能被切掉一两个像素。
-
cover：等比缩放至完全覆盖容器，**必定填满，但可能裁剪**；适合氛围图、不要求细节完整的场景 -
contain：等比缩放至完全可见，**必定完整，但可能留白**；适合 logo、图标类背景 - 想兼顾？可用
background-size: 100% 100%强制拉伸（失真），或结合background-position手动微调焦点区域
html 元素上设 background + min-height: 100dvh + background-size: cover，再加一行 background-attachment: scroll（除非真需要视差效果）。fixed attachment 的视觉收益，远不如它带来的兼容性麻烦。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
