背景图没铺满主因是容器无高度、漏写background-repeat: no-repeat或误用100% 100%；body高度默认仅包裹内容，须设html, body{margin:0;height:100%}并加min-height:100vh，且禁用100% 100%防变形。
背景图没铺满，90% 是因为容器没高度、漏写 background-repeat: no-repeat，或者误用了 background-size: 100% 100%。
body 背景只显示一小块，顶部/底部留白
这不是 background-size: cover 失效，而是 body 实际高度只有几十像素——它默认只包裹内容，不继承视口高度。
-
html, body { margin: 0; height: 100%; }必须写，否则高度继承链断掉 -
body上加min-height: 100vh（不是height: 100vh），防内容少时留白 - 用 DevTools 查看
body的 Computed → height，如果是24px或类似小值，说明上面两条没生效
图片变形、人脸压扁、文字拉长
几乎全是误用了 background-size: 100% 100%。这个值不是“铺满”，是“硬拉”，浏览器完全不管原始宽高比。
- 摄影类、人像类、带文字的背景图，一律禁用
100% 100% - 视觉优先的首屏大图，用
background-size: cover+background-position: center - 需要完整展示 Logo 或图表，才考虑
background-size: contain，但它必然留白
移动端背景跳动、滚动卡顿、iOS Safari 不生效
根本原因是 100vh 在地址栏收起/展开时会动态变化，而 background-attachment: fixed 在部分 WebView 中被降级或触发重绘。
- 放弃
background-attachment: fixed，改用scroll（默认值）更稳妥 - iOS Safari 下，用 JS 动态注入
--vh变量：document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)，CSS 中写min-height: calc(var(--vh, 1vh) * 100) - 更轻量方案：用
display: flex布局，让子容器flex: 1撑满父级，绕过vh缺陷
图片加载中裸奔、模糊、闪一下
全屏背景图是首屏关键元素，但 CSS background-image 没有加载状态钩子，容易暴露缺陷。
- 必须加
background-color降级，比如background: #1a1a1a url(...) no-repeat center/cover - 图片格式优先 WebP，分辨率 ≥ 2560×1440；高清屏补
@2x图或用srcset切换 - 开发时用小图占位极易漏写
background-repeat: no-repeat，一上线就平铺成马赛克
真正让 cover 稳定工作的，从来不是那行声明本身，而是 html 和 body 的高度继承、no-repeat 的显式关闭、以及移动端对 vh 动态行为的兜底处理——这些地方，调试时最容易跳过。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
