background-size: cover 单独使用无法实现响应式背景图，因其仅控制缩放不控制资源加载；必须配合媒体查询或 image-set() 实现多设备适配，否则高 DPR 屏模糊、小屏浪费带宽。
cover 本身不响应式，只是缩放逻辑；真要适配多设备，必须配合媒体查询或 image-set()，否则高 DPR 屏幕会模糊、小屏会浪费带宽。
为什么 background-size: cover 单独用不行
它只控制缩放行为，不控制加载哪张图。浏览器永远只下载 background-image 里写的那一张图，不管设备是 iPhone 15 Pro（3x）、MacBook Pro（2x）还是低端安卓（1x）。结果就是：
- 高清屏上拉伸渲染 → 图片发虚，
background-size: cover越“努力”，模糊越明显 - 手机加载 4K 背景图 → 白白消耗流量，首屏延迟升高
- 无法声明
sizes或srcset→ CSS 层面没有原生多图源机制
用媒体查询切换不同尺寸背景图（最稳方案）
这是目前兼容性最好、可控性最强的纯 CSS 方式，适合 banner、全屏 hero 区等装饰性场景。
- 用
min-width切分辨率档位，比如@media (max-width: 767px)对应移动端 - 用
min-resolution或-webkit-min-device-pixel-ratio区分像素密度，例如@media (-webkit-min-device-pixel-ratio: 2) - 务必为每个断点提供对应尺寸的图：1x 屏用 1200px 宽，2x 屏用 2400px 宽，避免拉伸
- 示例：
body { background-image: url(img/bg-1200.jpg); background-size: cover; background-position: center; } @media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2) { body { background-image: url(img/bg-2400@2x.jpg); } }
用 image-set() 做密度适配（现代浏览器首选）
它让浏览器自己选图，语义更干净，但 Safari 15.4+、Chrome 89+ 才稳定支持，旧版需降级 fallback。
立即学习“前端免费学习笔记（深入）”；
- 写法必须带单位，如
1x、2x，不能只写数字 - 必须提供
url()fallback，否则不支持的浏览器直接不显示背景 - 示例：
body { background-image: image-set( url(img/bg-1200.jpg) 1x, url(img/bg-2400.jpg) 2x ); background-size: cover; background-position: center; } - 注意：它只管密度，不管视口宽度 —— 想兼顾宽屏和窄屏，仍得套媒体查询
容易被忽略的关键细节
很多人调完 cover 就以为完了，其实还有三个硬伤常被跳过：
-
background-position: center必须显式写，否则默认左上角，裁剪后关键内容可能直接消失 - 没设
background-color→ 图片加载中页面一片空白，尤其弱网下体验极差 - 所有背景图路径都该走相对路径或 CDN，且确保
images/目录下真有对应文件，404 时image-set()会静默失败
