必须设置html, body { height: 100%; }并清除body默认margin，再配合min-height: 100vh、background-size: cover和background-color兜底，才能实现全屏不截断、无白屏的背景图效果。
body背景图不铺满整个视口？检查height和min-height
直接给 body 设 background-image 却只显示顶部一截，大概率是 body 自身高度没撑开。浏览器默认 body 高度由内容决定，不是视口高度。
- 必须显式设置
html, body { height: 100%; }，否则100vh在body上无效 - 更稳妥的做法是加
min-height: 100vh，防止内容少时背景被截断 - 记得清除
body默认margin（通常是 8px），否则四周留白
用background-size: cover还是contain？看是否允许裁剪
cover 保证填满且不拉伸变形，但可能裁掉边缘；contain 完整显示整张图，但会有留白。多数全屏背景选 cover。
-
background-size: cover：图像等比缩放，直到宽或高至少有一个 ≥ 容器尺寸 -
background-size: 100% 100%强制拉伸——会严重变形，慎用 - 如果图太小，
cover可能模糊，建议原图宽度 ≥ 1920px，高度 ≥ 1080px
背景固定不动？加background-attachment: fixed有坑
想实现视差滚动效果常加 fixed，但它在 iOS Safari 和部分安卓 WebView 中表现异常：滚动卡顿、背景错位甚至消失。
- 移动端优先考虑用
background-attachment: scroll（默认值） - 若坚持用
fixed，需测试 iOS 15+ 和 Chrome Android 最新版 - 替代方案：用
position: fixed的z-index: -1
图片加载前白屏？用background-color兜底
网络慢时，背景图还没加载完，body 会短暂显示白色（或继承的背景色），体验突兀。
- 在
body上同时设background-color（如近似主色调）和background-image - CSS 顺序不影响，浏览器会自动叠加：颜色打底，图片盖在上面
- 避免用
transparent或未设颜色——等于没兜底
实际生效的关键组合通常长这样：
html, body {
height: 100%;
margin: 0;
}
body {
background-color: #1a1a1a;
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 100vh;
}
真正容易被忽略的是 html 元素的高度声明——漏掉它，body 的 100% 就失去参照，后面所有设置都白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
