全屏背景图不铺满的三大主因是：body默认margin未清除、ios safari中100vh动态失效、background-image加载失败无fallback。需重置body/html边距与高度，优先用100dvh并降级处理，同时设background-color备用色及正确路径与跨域配置。
body背景图不铺满全屏？检查是否漏了重置默认边距
浏览器会给 body 默认加 margin（通常是 8px），哪怕设了 height: 100vh，图也会在四周留白。这不是图片没拉伸，是容器本身没贴边。
实操建议：
- 必须给
body和html都加margin: 0 - 同时设
html, body { height: 100%; }，避免某些旧版浏览器对100vh解析异常 - 如果用
background-image，记得配background-size: cover，否则可能拉伸变形或留空
background-size: cover 和 contain 的区别直接影响显示效果
选错值会导致图被裁剪过多、关键内容消失，或者上下/左右留白——尤其在移动端横竖屏切换时更明显。
常见错误现象：background-size: 100% 100% 强行拉伸导致人脸扭曲；cover 在窄高屏（如 iPhone 竖屏）下裁掉头顶；contain 则可能在宽屏下只占中间一小块。
使用场景建议：
- 强调氛围、不依赖具体构图 → 用
cover - 必须完整显示 Logo 或文字区域 → 用
contain，再配合background-position: center - 想兼顾两者？可加媒体查询：
@media (max-aspect-ratio: 1/1) { background-size: contain; }
100vh 在 iOS Safari 中滚动时会失效
iOS Safari 的地址栏收放会动态改变视口高度，100vh 不会实时更新，导致背景图突然被截断或底部露白——这是真 bug，不是写法问题。
解决思路：不用 100vh，改用 JS 动态设高度，或用 CSS 新特性兜底：
- 优先尝试
min-height: 100dvh（dvh是动态视口单位，Safari 16.4+ 支持） - 兼容老版本：用
height: 100%+ 父容器（如html）设height: 100%，再靠 JS 监听resize重设 - 简单项目可退一步：用
min-height: 100vh而非height: 100vh，至少保证内容撑开后背景不丢
背景图加载失败时页面一片空白？得加 fallback
网络慢、路径错、CORS 限制都可能导致 background-image 加载失败，而用户只看到纯色或透明背景，体验断层。
实操建议：
- 用
background-color设一个接近主图色调的备用色，比如background-color: #2c3e50 - 路径务必用相对根路径或绝对 URL，避免
./img/bg.jpg在子路由下 404 - 如果图来自 CDN，检查响应头是否含
Access-Control-Allow-Origin，否则跨域环境下background-image静默失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
