必须同时设置background-size: cover、no-repeat和center才能稳定铺满不失真；100% 100%强制拉伸导致变形，仅适用于无比例要求的抽象图，且在响应式、移动端及fixed滚动中问题频发。
用 background-size: cover 配合 no-repeat 和 center 是最可靠的方式，不是“试试看”，而是必须同时满足这三项才能稳定铺满且不失真。
为什么 background-size: 100% 100% 经常出问题
它强制拉伸图片，完全忽略原始宽高比。一张 4:3 的图在 16:9 容器里会被压扁或拉长，人物变形、文字扭曲是常态。仅适合纯纹理、抽象图这类对比例无要求的素材。实际项目中一旦换图或适配响应式断点，100% 100% 很快变成维护雷区。
- 浏览器不会警告你“这张图被拉变形了”，只会安静地渲染错位结果
- 移动端 viewport 缩放后，
100% 100%可能导致边缘像素撕裂或模糊加剧 - 和
background-attachment: fixed搭配时，拉伸感在滚动中更明显
background-size: cover 必须配齐的三个配套属性
cover 本身只管缩放逻辑，但最终是否“铺满且居中”，取决于另外三个属性是否显式声明：
-
background-repeat: no-repeat：不写就默认repeat，小图会平铺，cover直接失效 -
background-position: center center：不写可能默认0 0（左上角），裁剪时切掉关键内容 - 容器要有明确尺寸：比如
height: 100vh或固定height: 500px；height: auto时cover无处可盖
常见错误写法：background: url(bg.jpg) cover; —— 这里漏了 no-repeat 和 center，且 cover 在简写中位置错误，应放在 url() 后、no-repeat 前。
立即学习“前端免费学习笔记（深入）”；
body 全屏背景总有一条白边？检查这三处
即使写了 cover，页面顶部/底部/右侧仍出现白边，大概率是以下干扰项没清理干净：
-
body或html有默认margin：必须加margin: 0 -
body缺少高度定义：只写height: 100%不够，要配合html { min-height: 100%; }或直接用min-height: 100vh - 父级元素（如 wrapper div）设置了
overflow: hidden或padding，把背景区域物理截断了
最简健壮写法：
body {<br> margin: 0;<br> min-height: 100vh;<br> background: url('bg.jpg') no-repeat center center / cover;<br>}
图片加载失败时背景直接变空白？加后备色
网络延迟、路径写错、CORS 限制都可能导致 background-image 加载失败，此时整个区域留白。防呆做法是加一层 background-color：
- 写在
background简写里：顺序为background: #222 url('bg.jpg') no-repeat center center / cover; - 颜色选接近图片主色调的灰阶值，避免突兀跳变
- 不要依赖
background-blend-mode混合——旧版 Safari 不支持，且增加不可控变量
真正容易被忽略的是：很多团队把背景图路径写成绝对 URL（如 https://cdn.example.com/bg.jpg），却没配好 CDN 的 CORS header，导致图片静默失败，连控制台都不报错。本地开发时用相对路径 + file:// 协议也会触发同源策略拦截，务必在 HTTP 服务下测试。
