background-size: cover 并非唯一可靠方案，必须配套 background-repeat: no-repeat、background-position: center center 及容器足够高度（如 min-height: 100vh）才能生效；缺一即导致留白、平铺或裁剪偏移。
用 background-size: cover 是唯一可靠方案，前提是配套属性写全、容器高度有保障——漏掉任意一环都会导致留白或变形。
为什么 background-size: cover 必须配 no-repeat 和 center
cover 只管缩放逻辑，不控制平铺和定位。浏览器默认 background-repeat: repeat，小图会平铺；默认 background-position: 0 0（左上角），裁剪时关键内容直接被切掉。
-
background-repeat: no-repeat：防止图片重复平铺，尤其当图尺寸小于容器时 -
background-position: center center：确保等比缩放后画面中心始终对准容器中心 - 三者缺一不可，简写写法应为：
background: url(...) no-repeat center center / cover，顺序不能错
容器没高度，cover 就是摆设
如果目标元素（比如 div 或 body）没有明确高度，background-size: cover 无处可盖——它只能按容器当前尺寸缩放，而默认 height: auto 时容器高度由内容撑开，往往远小于视口。
- 给容器设
height: 100vh或min-height: 100vh（推荐后者，防内容少时铺不满） - 若设在
body上，必须同步清空html和body的默认margin，并让html有高度链：html { height: 100%; } - 绝对定位的容器要加
top: 0; left: 0; width: 100%; height: 100%;，否则100%无参考基准
background-size: 100% 100% 为什么总出问题
它强制拉伸图片填满宽高，完全无视原始比例。一张 4:3 的人像图在 16:9 容器里会被压扁，文字扭曲、人脸变形，且这种失真浏览器不会报错，只安静渲染。
立即学习“前端免费学习笔记（深入）”；
- 仅适用于抽象纹理、渐变色块等无构图要求的素材
- 响应式断点切换时极易失控，比如桌面图在手机上横向拉长成细条
- 与
background-attachment: fixed搭配滚动时，拉伸感更明显，iOS Safari 还可能触发模糊渲染
真正容易被忽略的是高度链和默认边距——90% 的“铺不满”问题都卡在这两步，而不是背景属性本身写错了。
