必须加html, body { margin: 0; padding: 0; min-height: 100vh; }，因body默认有margin且无显式高度，浏览器不会自动撑满视口，min-height比height更安全，可防内容超长时背景截断。
直接用 body 加 background-size: cover 就能实现可靠全屏背景，但 90% 的失败都卡在路径、高度、缩放三者没对齐——不是代码写错，而是浏览器默认行为没覆盖。
为什么 body 背景只显示一截？
因为 body 默认有 margin，且没有显式高度；浏览器不会自动把它撑到视口那么高。
- 必须加
html, body { margin: 0; padding: 0; min-height: 100vh; }——min-height比height更安全，内容超长时背景不会被截断 - 别只设
height: 100%：它依赖父容器高度，而html的高度又依赖于文档流，默认是“刚好包住内容”，不是视口高度 - 图片路径写错或 404 时，背景会完全消失，但控制台未必报错，容易误判为样式问题
background-size: cover 和 100% 100% 差在哪？
两者视觉可能相似，但行为逻辑完全不同：
-
cover：等比缩放图片，确保容器被完全覆盖（可能裁剪边缘），适合摄影图、氛围图 -
100% 100%：强制拉伸宽高各自填满，必然变形，仅适用于纯色渐变、几何图案等无比例依赖的图 - 移动端慎用
cover：小屏下人脸、Logo 容易被裁掉，建议配合background-position: center 30%微调垂直锚点
怎么让页面真正“适应屏幕”？
光靠背景图不够，整个页面结构得跟上。关键不在“填满”，而在“响应式锚定”：
立即学习“前端免费学习笔记（深入）”；
- 必须加
<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则 iOS/Android 浏览器会按桌面宽度渲染 - 正文区域建议用
min-height: 100vh，而不是height: 100vh；iOS Safari 的vh会把地址栏高度算进去，滚动时跳变 - 如果正文用了
flex布局，记得给容器设align-items: center和justify-content: center，但要避开移动端键盘弹出时vh突然变小导致内容被挤出视口 - 文字可读性常被忽略：深色图配浅字、浅色图配深字，或加一层
::before伪元素 +rgba(0,0,0,0.3)遮罩
用 <video> 替代图片做背景更可控吗？
是，但约束更强：现代浏览器要求 autoplay + muted 才允许静音自动播放，否则视频黑屏或报错。
- 必须加
position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;——object-fit: cover是<video>特有的，比background-size: cover更精准 - 别用
width: 100vw; height: 100vh：Safari 移动端对vh的计算不稳定，100%更稳妥 -
<video>必须单独一层，正文用独立<main>或<div class="content">，且至少设z-index: 1或position: relative，否则在部分安卓 WebView 中仍可能被压
最易被忽略的一点：全屏背景不是“设完就完”，而是要持续验证——在真机 Safari、Chrome Android、微信内置浏览器里分别打开，看是否留白、裁切、跳变或黑屏。尤其注意图片加载前的空白期，background-color 占位不是可选项，是必选项。
