background-size: cover 未铺满屏幕的根本原因是元素自身未撑满视口，需同时设置 html, body { margin: 0; padding: 0; }、html { height: 100%; } 并将背景设在 html 上。
background-size: cover 单独写没用，因为它的作用对象是「元素内容区」，不是视口——你得先让那个元素真正撑满屏幕。
为什么 background-size: cover 没铺满整个屏幕
常见现象：图片只占顶部一截、左右留白、滚动时背景上滑脱节，甚至整张图消失。根本原因不是 cover 失效，而是它没容器可盖。
-
body默认高度由内容决定，可能只有 20px 高；cover就按这 20px 缩放图片，当然看不见效果 - 浏览器给
body设了默认margin，导致背景边缘被“挤出”视口 - 如果背景设在
div上，而该div是 flex 子项且未设align-items: stretch，它会收缩成内容高度 -
background-attachment: fixed在 iOS Safari（尤其旧版）中常失效，造成滚动错位，但很多人误以为是cover问题
必须加的三行基础样式
不靠 JS、不换结构，纯 CSS 稳定生效的关键就这三步：
- 给
html和body清除默认边距：html, body { margin: 0; padding: 0; } - 确保根容器有明确高度参照：
html { height: 100%; }（比body { height: 100vh; }更稳，避免 iOS 地址栏收放抖动） - 把背景直接设在
html上，而不是body：html { background: url("bg.jpg") no-repeat center center / cover; }
注意：center center / cover 是 background-position 和 background-size 的简写，语义清晰且兼容性好。
移动端和高 DPR 设备的坑
iOS Safari 对 100vh 和 fixed 背景的处理不稳定，尤其在地址栏收放、横竖屏切换时，cover 会突然缩回或错位。
- 优先用
100dvh替代100vh（Chrome 105+、Safari 16.4+ 支持），但需 fallback：min-height: 100vh; min-height: 100dvh; - 真机测试前别信设计稿——iPhone 竖屏 9:16，桌面 16:9，单张图用
cover必然裁不同区域；人脸/Logo 关键部位会被切掉 - 图片分辨率建议 ≥ 2× 最大目标设备宽度（如 iPhone 14 Pro Max 是 1290×2796，图至少 2580×5592），否则 Retina 屏插值放大后模糊
- 慎用
background-origin: content-box，padding 区域不渲染背景，造成“伪留白”，改用border-box
cover 和 contain 到底怎么选
这不是审美选择，是内容安全边界问题。
-
cover：缩放倍数 =max(containerWidth / imageWidth, containerHeight / imageHeight)→ 填满，必裁剪。适合氛围图、Banner、登录页 -
contain：缩放倍数 =min(containerWidth / imageWidth, containerHeight / imageHeight)→ 完整，必留白。适合 Logo、头像、证件照类需 100% 可识别的内容 - 永远别用
100% 100%—— 强制拉伸失真，DPR 高时更糊，且无法响应式适配 - CSS 背景图不支持
srcset，想响应式换图只能靠 JS 切类名，或用image-set()（目前仅 Safari/Chrome 较新版本支持）
最常被忽略的一点：设计师给的图宽高比，和你的页面容器宽高比不一致时，cover 的裁剪逻辑是确定的，但“裁哪”完全取决于 background-position。不实机验证，上线才发现主角眼睛被切掉一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
