background-size: cover本身不撑开容器，必须同时设置min-height: 100vh、background-image、background-position: center center和background-repeat: no-repeat，否则因容器高度为0或未禁用重复而失效。
background-size: cover 本身不会让背景图“全屏”，它只负责缩放逻辑；真正决定是否铺满的是容器高度是否等于视口高度。
为什么 background-size: cover 没撑满整个屏幕
常见现象是背景图只显示在内容区域（比如几行文字高），上下大片留白，甚至完全看不见。这不是 cover 失效，而是目标元素实际高度为 0px 或远小于视口。
-
html和body默认有margin: 8px（Chrome 等浏览器），且height不继承视口高度，只包裹内容 - 只给
body设置background-size: cover，但没设height，浏览器根本不知道“全屏”指多高 - 用 DevTools 查看
body的Computed height，常会发现是24px或类似小值
必须配齐的四个 CSS 声明
单写 background-size: cover 不足以实现稳定全屏。以下四条需同时存在：
-
min-height: 100vh：比height: 100vh更安全，避免内容超长时被截断；iOS Safari 中可考虑100dvh替代 -
background-image: url("bg.jpg")：路径以 HTML 文件为基准，注意相对路径是否正确 -
background-position: center center：防止关键构图（如人脸）被裁掉；若主体在顶部，改用center top -
background-repeat: no-repeat：漏写会导致小图平铺，cover完全失效
background-attachment: fixed 在移动端为何常失效
这个属性本意是让背景图随滚动“固定”在视口，形成视差效果，但在 iOS Safari 和部分安卓 WebView 中，它会直接被忽略，甚至导致背景图消失或触发页面重绘卡顿。
- 替代方案：改用
position: fixed的<img>标签 +z-index层叠，手动控制层级和缩放 - 若坚持用 CSS 背景，可检测
navigator.userAgent，对移动端降级为scroll（默认值） - 注意：
fixed与cover组合在某些 Android 低版本中会导致背景图错位，建议在真机上验证
什么时候该换用 ![]()
标签 + object-fit
当需要响应式焦点控制、图片懒加载、或 SEO 友好（搜索引擎能抓取 <img> 的 alt）时，div + 背景图就力不从心了。
-
<img>配合object-fit: cover和position: fixed，能更精准控制缩放行为和加载时机 - 需显式设置
width: 100vw、height: 100vh，并用z-index: -1确保它在内容层之下 - 相比背景图，
<img>支持loading="lazy"、decoding="async"等原生优化，对首屏性能更可控
最易被忽略的点是：所有这些样式都依赖容器真实占满视口——不是靠父级继承，而是靠 vh 单位和根元素重置。哪怕只漏掉 html, body { margin: 0; height: 100vh; } 这一行，cover 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
