全屏背景需重置html/body尺寸与边距、慎用background-attachment:fixed、优选cover裁切并精调position、高DPR用2x图、iOS用绝对定位+transform绕过闪动、动态视口推荐100dvh。
全屏背景效果不靠第三方库也能做，关键在 body 和 html 的尺寸控制、图片加载策略，以及是否启用硬件加速——否则滚动卡顿、缩放错位、移动端白边都会立刻暴露问题。
确保 html 和 body 占满视口且无默认边距
浏览器默认给 body 加了 8px 外边距，html 高度也不自动撑满，这是全屏撕裂最常见的源头。
- 必须显式重置：
html, body { height: 100%; margin: 0; padding: 0; } - 仅设
body { height: 100vh }不够——当页面内容超长时，vh会失效，导致底部露白；height: 100%才能继承父级（即html）高度 - 如果背景图用在
body上，记得加background-attachment: fixed实现视差感，但注意 iOS Safari 会禁用该属性的硬件加速，需搭配transform: translateZ(0)强制开启
用 background-size: cover 还是 contain？看内容是否允许裁切
cover 强制填满且保持比例，但必然裁边；contain 完整显示但留黑边。多数沉浸式场景选 cover，但得提前处理好构图重点区域。
-
background-position很关键：默认是50% 50%（居中），若主视觉偏上，改用50% 20%避免人脸被切掉 - 避免用
background-repeat: no-repeat后忘记设background-position，否则小图会锚定左上角，右侧/下侧大片空白 - 高 DPR 设备（如 Retina 屏）下，用
@media (-webkit-min-device-pixel-ratio: 2)切换 2x 图片，否则模糊
解决移动端 Safari 滚动时背景“闪动”或“固定失效”
iOS Safari 对 background-attachment: fixed 的实现有缺陷：滚动瞬间会回退成 scroll 行为，造成跳帧。这不是 bug，是 Safari 主动降级以保性能。
立即学习“前端免费学习笔记（深入）”；
- 绕过方案：不用
body背景，改用绝对定位的<div>层，设top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; - 必须加
will-change: transform或transform: translateZ(0)让该层进合成层，否则 iOS 下仍可能闪烁 - 禁止在该层内写文字或交互元素——它只是画布，所有内容必须放在它上方的独立容器里，否则触摸事件会穿透
真正难的不是让图铺满，而是让图在各种缩放、旋转、横竖屏切换、系统深色模式切换时都不崩。比如 vh 在 iOS 地址栏收起/展开时会动态变化，此时用 100dvh（动态视口单位）更稳，但得查兼容性——Chrome 105+、Safari 16.4+ 才支持。
