background-size: cover 是实现真正可用全屏背景图的核心，它在保持图片宽高比前提下缩放裁剪，避免100% 100%导致的变形、模糊与构图崩坏，并需配合html/body高度链设置、渐变叠层提升文字可读性及响应式加载方案。
background-size: cover 是实现真正可用的全屏背景图的核心，不是 100% 100%，也不是靠 height: 100vh 单独撑开就能稳住的。
为什么 background-size: 100% 100% 通常不推荐
它会强制拉伸图片填充整个容器，不管原始宽高比——人像变形、文字模糊、构图崩坏是常态。尤其在横屏手机或超宽显示器上，主体内容常被严重挤压或拉长。而 cover 在保持比例的前提下缩放并裁剪，视觉重心更可控。
常见错误现象：
- 图片在 iPad 上显示完整但 PC 上只看到头顶，或反之
- 文字叠加区被拉伸变形，导致可读性下降
- 使用
100% 100%后发现滚动时背景“撕裂”，其实是图片被重复拉伸渲染造成的视觉错位
body 上设背景图必须处理 html 和 body 的高度链
很多页面背景只在顶部显示一截，根本铺不满，问题往往出在高度继承断裂：浏览器默认 html 和 body 不自动占满视口，height: 100% 是相对父容器算的，而父容器（即视口）没显式声明高度。
立即学习“前端免费学习笔记（深入）”；
必须同时设置：
html, body { height: 100%; margin: 0; padding: 0; }- 或者更直接：
html { height: 100%; } body { min-height: 100vh; }（min-height比height更安全，避免内容超长时被截断） - 如果用了
background-attachment: fixed，还要注意 Safari 对 fixed 背景在滚动时的渲染 bug，建议加transform: translateZ(0)强制硬件加速
文字可读性差？别只调 opacity，用渐变叠层更可靠
纯靠降低背景图透明度来让白字可读，容易让整张图发灰、细节丢失。更稳妥的做法是用 linear-gradient 叠在图片上方，控制明暗过渡区域。
示例写法：
body {
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('bg.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
关键点：
- 渐变写在
url()前面，CSS 层叠顺序决定它盖在图片之上 - 单色渐变（如
to bottom）比多色更易控对比度 - 避免用
background-color直接覆盖——它会完全遮掉图片，失去背景意义
响应式加载和 fallback 容易被忽略
大图直接扔在 body 上，移动端首屏加载慢、流量超标、甚至触发 iOS Safari 的背景图降级（变成纯色）。真正在意体验的项目，会分场景加载：
- 用
<picture></picture>+media属性切换不同尺寸图，但注意body不支持<picture></picture>，得换方案 - 实际推荐：JS 动态切换
body的style.backgroundImage，根据window.devicePixelRatio和matchMedia判断分辨率与设备类型 - 至少保留
background-color作为兜底，防止图片 404 或加载失败时页面“失重”
最常被跳过的细节：图片路径相对于 CSS 文件位置解析，而不是 HTML；用外部 CSS 时，url('../images/bg.jpg') 很容易写错层级，本地测试正常、上线 404。
