background-size: cover本身不响应式，仅控制缩放逻辑；真正实现响应式全屏背景需同时解决容器撑满视口、按设备像素比加载图片、精准控制裁剪位置三件事。
直接说结论：background-size: cover 本身不响应式，它只控制缩放逻辑；真正实现“响应式全屏背景”，必须解决三件事：容器撑满视口、图片按设备像素比加载、关键内容不被裁错位置。
为什么 background-size: cover 在 body 上常失效
不是属性写错了，是 body 默认高度由内容决定，height: 100% 没参照物——父级 html 若没设高，body 就塌陷成几像素高，cover 只能缩一张图塞进那几像素里。
必须同时写：
html, body { margin: 0; padding: 0; }-
html { height: 100%; }（比body { height: 100vh; }更稳，避开 iOS 地址栏抖动） - 把背景设在
html上，而非body或某个div
如何避免高清屏模糊、小屏浪费流量
background-size: cover 不管你用的是 1200px 还是 4K 图，浏览器只加载 background-image 里写的那一张。结果就是：iPhone 15 Pro 上拉伸发虚，低端安卓却下了一张 4K 图。
立即学习“前端免费学习笔记（深入）”；
现代方案优先用 image-set()：
html {
background-image: image-set(
url(img/bg-1200.jpg) 1x,
url(img/bg-2400.jpg) 2x,
url(img/bg-3600.jpg) 3x
);
background-size: cover;
background-position: center;
}
注意：
- 必须带单位（
1x、2x），不能只写数字 - 必须提供
url()fallback，否则不支持的浏览器背景空白 - 它只适配像素密度，不处理视口宽度——宽屏设备仍可能拉伸，需配合媒体查询切图
为什么人物/Logo 总是被切掉一半
cover 的逻辑是「等比缩放后完全覆盖」，裁哪里，取决于 background-position。默认 center center 在横屏 banner 里常把人脸切掉，尤其竖构图原图直接当背景时。
微调策略：
- 人像居中 → 改用
background-position: center top或50% 20%，把视觉重心往上提 - 移动端竖屏易裁头 → 加媒体查询：
@media (max-width: 768px) { background-position: center 10%; } - 别依赖
50% 50%：百分比是按容器算的，不是图片；center top语义更明确、更稳 - 如果设计师强调“Logo 必须完整显示”，就别硬扛
cover，换contain+background-color填白更可靠
容易被忽略的三个硬伤
很多人调完 cover 就以为结束了，但线上常崩在这三点：
- 没写
background-repeat: no-repeat→ 小图会被平铺，cover失效 - 没设
background-color→ 图片加载中页面纯白，弱网下体验极差 - 漏了
<meta name="viewport" content="width=device-width, initial-scale=1">→ iOS Safari 直接放弃计算视口，100vh彻底不准
真正难的不是写对 cover，而是让不同 DPR、不同宽高比、不同加载时机下的设备，都呈现出设计师想要的那一帧构图——这得靠组合控制，不是单个属性能兜住的。
