background-size: cover不会自动铺满全屏，因其仅控制缩放逻辑，不解决容器高度缺失问题；必须为html和body设height:100%或min-height:100vh，清除margin:0，并配background-position:center、no-repeat才能实现真正全屏覆盖。
直接写 background-size: cover 不会自动铺满全屏——它只管缩放逻辑，不管容器有没有高度。真正卡住的，是 html 和 body 没撑开，或者背景设错了位置。
为什么 background-size: cover 还是没铺满视口
根本不是 cover 失效，而是它作用的对象（比如 body）本身高度为 0 或远小于视口。浏览器默认 body 高度由内容决定，没内容时就是“一条线”，cover 再强也缩不出高度来。
-
html和body都没设height: 100%或min-height: 100vh，导致参照系丢失 -
body默认有margin: 8px，边缘露白，看起来像“没铺满” - 背景图写在某个
div上，而不是html或body——那它只铺满那个div，跟“全屏”无关 - 用了
background-attachment: fixed，但在 iOS Safari 中可能不生效，滚动时背景突然上滑、露出空白
必须配齐的四个 CSS 声明
单独一个 background-size: cover 没用。要视觉上真·全屏，这四条得一起上：
-
min-height: 100vh—— 推荐用min-height而非height，避免内容超长时被截断 -
background-position: center center—— 防止图片偏左/偏上；若关键内容在下方，可改bottom 20% -
background-repeat: no-repeat—— 否则小图会平铺，cover彻底失效 -
margin: 0—— 必须清掉body默认外边距，否则左右/顶部留白
完整最小可用写法：
立即学习“前端免费学习笔记（深入）”；
body {
margin: 0;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh;
}
cover 下关键内容被裁掉怎么办
cover 必然裁剪，但裁哪取决于 background-position。默认 center center 是按图片中心对齐，如果构图中心不是你想要保留的部分（比如人脸被切掉），就得手动调锚点：
-
background-position: top center—— 保上方内容，适合人像特写 -
background-position: bottom 10%—— 把焦点往下压，给标题栏留空间 -
background-position: 30% 70%—— 百分比数值从左→右、上→下，可精细控制裁剪起点 - 响应式场景下，建议用媒体查询切换
background-position，比如小屏改center bottom避开文字区
移动端 Safari 的两个实际坑
iOS Safari 对全屏背景的处理和桌面 Chrome 差异明显，容易白忙活：
-
100vh在地址栏展开/收起时会跳动（视口高度变化），改用100dvh更稳，但需检查兼容性（iOS 16.4+ 支持） -
background-attachment: fixed在很多 iOS 版本中无效，滚动时背景“跟着动”，失去固定覆盖效果；别依赖它，优先用min-height: 100vh+ 内容自然滚动 - 大图在 Retina 屏上用
cover会被插值放大，若原图分辨率不够，边缘会模糊——这不是 CSS 问题，是图源问题
最稳妥的落地方式：不用 fixed，不依赖 html 高度继承，所有关键声明都落在 body 上，并用 100dvh fallback 到 100vh 的 JS 检测逻辑（如需极致兼容）。
