根本原因是父容器高度为0，因html和body默认无高度，需设height:100%或min-height:100vh并清除margin；cover等比缩放裁剪填满，contain等比缩放留白；全屏需配合no-repeat、center center定位及移动端vh适配。
为什么 background-size: cover 有时没铺满？
根本原因不是写错了属性，而是父容器高度为 0 —— body 和 html 默认没有高度，背景图只在“有高度的地方”渲染。即使写了 background-size: cover，若容器本身塌陷，图就缩在左上角一小块。
- 必须显式设置
html和body高度为 100% -
min-height: 100vh比height: 100vh更稳妥，避免内容超出时被截断 - 记得清除默认 margin（
body { margin: 0; }），否则可能产生意外滚动条
background-size: cover 和 contain 的关键区别
cover 是“等比缩放并裁剪”，保证填满整个容器；contain 是“等比缩放并完整显示”，可能留白。全屏背景图几乎总是用 cover，但要注意裁剪位置不可控。
- 裁剪从中心开始，所以重要视觉元素（如人脸、Logo）务必居中构图
- 移动端 viewport 变化时，
cover裁剪区域会动态偏移，建议用background-position: center center锁定锚点 - 不要依赖
cover保留所有细节——它本质是牺牲边缘换填充
如何让背景图真正“全屏”且响应稳定
单靠 background-size: cover 不够，需配合定位、重复控制和防抖动策略。
- 加上
background-repeat: no-repeat，避免平铺干扰 - 用
background-attachment: fixed可实现视差效果，但 iOS Safari 有兼容问题，慎用 - 推荐组合：
background: url(...) no-repeat center center / cover—— 一行写完，语义清晰 - 如果页面有 header 或 sticky 导航，背景图容器应设为独立
div并绝对定位，避免被其他元素挤压
移动端 Safari 常见失效场景及修复
iOS Safari 对 vh 单位处理特殊：地址栏收起/展开时会重算，导致背景图突然跳变或留白。这不是 bug，是 viewport 行为。
立即学习“前端免费学习笔记（深入）”；
- 避免直接用
height: 100vh做容器高度，改用min-height: 100vh+height: 100%组合 - 更可靠方案：用 JS 动态设置
style="height: ${window.innerHeight}px"，并在 resize 时更新（注意节流） - 测试时务必真机操作——模拟器无法复现地址栏切换行为
全屏背景图的难点不在 CSS 属性本身，而在高度继承链、viewport 动态性和裁剪不可控性。把 html/body 高度、background-position 和移动端 vh 行为这三处盯死，基本就不会出大问题。
