全屏背景图未铺满的根本原因是html和body默认高度为0，需设min-height:100vh并清除margin；cover仅控制缩放，不解决容器高度缺失；慎用fixed和100%100%，移动端注意Safari的vh跳动问题。
background-size: cover 为什么没铺满全屏
根本原因不是 cover 失效，而是它只控制“缩放行为”，不解决“容器高度缺失”这个前提。浏览器默认 body 和 html 高度由内容撑开，没内容时高度为 0，背景图自然无处可铺。
- 必须显式给
html和body设height: 100%或min-height: 100vh -
background-attachment: fixed会干扰cover在滚动时的视觉连贯性，慎用 - 如果父容器有 padding 或 border，
cover仍按容器盒模型（含 padding）计算缩放，可能裁切意外
全屏背景图的最小可靠写法
绕过各种隐式高度陷阱，直接用视口单位锚定。这是目前兼容性好、行为确定的写法：
body {
margin: 0;
background-image: url('bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh;
}
-
min-height: 100vh比height: 100%更稳妥——后者依赖父元素高度，而vh始终相对于视口 - 务必加
margin: 0，否则默认body的 8px 外边距会让背景边缘露白 -
background-repeat: no-repeat不是可选——万一图片太小又没关重复，会平铺出马赛克
cover 和 contain 在全屏场景下的实际区别
选错值会导致构图失败，尤其当图片宽高比和屏幕不一致时：
-
background-size: cover：等比缩放至完全覆盖容器，**必然有裁切**，适合强调主体、允许边缘丢失的场景 -
background-size: contain：等比缩放至全部可见，**必然留空**，适合 Logo、图标类需完整展示的内容 - 别用
100% 100%——它强行拉伸，严重失真，且在不同 DPR 设备上模糊加剧
移动端 Safari 的常见坑
iOS Safari 对 vh 单位有特殊处理：地址栏收起/展开时，100vh 会动态变化，导致背景跳动或截断。
立即学习“前端免费学习笔记（深入）”；
- 临时解法：用
min-height: -webkit-fill-available（仅 Safari 支持），但兼容性有限 - 更稳方案：JavaScript 动态设
style.minHeight = window.innerHeight + 'px'，并在resize事件中更新 - 注意：Safari 中
background-attachment: fixed与cover组合极易触发渲染卡顿，优先禁用
