background-size: cover 不等于全屏，因容器高度未占满视口；须用 100vh 并重置 html/body 样式，配合 cover/contain 语义选择、移动端 fixed 降级及图片加载优化。
直接用 background-size: cover 不等于全屏——它只管缩放，不管容器有没有撑满视口。多数人卡在这一步：图片明明设了 cover，却只铺开几行文字那么高，上下大片留白。
为什么 background-size: cover 没生效
根本原因是容器高度没占满屏幕。cover 再强，也只能缩放“已有高度”的区域。常见错误包括：
-
height: 100%写在div上，但父级html和body没设高度或有默认margin - 用
body当容器，却忘了清除body默认的margin: 8px（尤其 Chrome） - 在 Flex 或 Grid 容器里嵌套背景
div，但没给该div显式设height: 100%或100vh
解决方式统一：用 100vh 而非 100%，并重置根元素样式：
html, body {
margin: 0;
padding: 0;
height: 100vh;
}
.full-bg {
background-image: url('hero.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 100vh; /* 关键：不依赖父级继承 */
}
cover 和 contain 到底怎么选
选错就等于白配。两者行为差异极大，不是风格偏好，而是语义选择：
-
background-size: cover→ 图片等比放大，直到宽或高至少一个填满容器，多余部分裁剪。适合摄影类、氛围图，但必须配合background-position: center center防关键内容被切掉 -
background-size: contain→ 图片等比缩小，直到完全可见，四周必留白。适合 Logo、示意图、数据图表等需完整展示的场景 -
background-size: 100% 100%→ 强制拉伸，一定失真。仅限 UI 装饰性纹理或测试占位，生产环境慎用
别用 cover 去硬套一张竖构图人像——头和脚大概率被裁。此时要么换图，要么改用 contain + 预设背景色补白。
移动端 fixed 背景失效怎么办
background-attachment: fixed 在 iOS Safari 和部分安卓 WebView 中会被忽略，甚至导致背景消失或滚动卡顿。这不是 bug，是浏览器主动限制（为省电/性能）。
- 降级方案：媒体查询中对移动端禁用
fixed，改用默认scroll - 替代方案：用
position: fixed的<img>标签代替 CSS 背景，配合object-fit: cover - 注意：
<img>必须设display: block消除底部 4px 空隙，且z-index: -1（不是-999），否则可能被浏览器优化剔除
真机测试比模拟器重要得多。iOS 17+ 对 fixed 支持已改善，但低端安卓仍不稳定。
图片加载前的白屏和闪烁
大图加载慢时，用户会看到一秒白底或闪一下默认灰，体验断裂。这不是 JS 能完全解决的问题，得靠 CSS 预埋：
- 给容器预设
background-color，取图片主色调的浅色（如 #e6f0ff），比纯白柔和得多 - 首屏全屏图必须移除
loading="lazy"，否则可能延迟渲染甚至不触发加载 - 避免用 base64 编码大图——增大 HTML 体积，阻塞解析；优先用 WebP + CDN
最易被忽略的是图片分辨率：用 1200px 宽的图在 4K 屏上 cover，必然糊。建议提供 ≥1920px 宽的源图，并考虑 srcset 响应式加载（若用 <img> 方案）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
