CSS 的 background-image 无法真正按需加载图片，仅能通过 image-set() 实现 DPR 切换或媒体查询模拟响应式，但后者会预加载所有图片；最优解是改用 picture + srcset 语义化方案。
background-image 在不同屏幕下如何自动切换图片
纯 CSS 的 background-image 本身不支持根据设备像素比或视口宽度动态加载不同分辨率的图片——它只接受一个固定 URL。想实现“小屏加载小图、大屏加载高清图、高 DPR 设备加载 @2x 图”，必须借助 HTML 层的响应式能力（如 picture）或 JS 主动控制，CSS 自身做不到按需下载。
用 image-set() 实现最简 DPR 感知切换
image-set() 是目前唯一原生支持根据设备像素比（DPR）选择背景图的 CSS 函数，但兼容性有限（Chrome 21+、Safari 6.1+、Edge 79+，Firefox 尚未支持）。
div.hero {
background-image: image-set(
url('/img/hero-1x.jpg') 1x,
url('/img/hero-2x.jpg') 2x,
url('/img/hero-3x.jpg') 3x
);
}
- 浏览器会根据当前设备 DPR 自动选一个最匹配的源，不下载其他图
- 不支持按视口宽度（
min-width）切换，仅限 DPR - fallback 必须写在
image-set()外层：background-image: url('/img/hero-fallback.jpg'), image-set(...); - 无法配合
srcset语法，也不能嵌套媒体查询
用媒体查询 + 多个 background-image 规则模拟响应式
这是兼容性最好、最可控的方式，本质是靠 CSS 优先级和媒体查询覆盖，但要注意：所有图片都会被浏览器尝试加载（即使被后续规则覆盖），可能造成多余请求。
@media (max-width: 480px) {
.banner {
background-image: url('/img/banner-mobile.jpg');
}
}
@media (min-width: 481px) and (max-width: 768px) {
.banner {
background-image: url('/img/banner-tablet.jpg');
}
}
@media (min-width: 769px) {
.banner {
background-image: url('/img/banner-desktop.jpg');
}
}
- 务必按从窄到宽顺序书写，避免高优先级规则被低优先级覆盖
- 使用
background-size: cover或contain配合background-position控制裁剪，否则同一张图在不同尺寸下可能拉伸变形 - 如果图片体积差异大，建议搭配
loading="lazy"的内联图片做降级，或用 JS 监听resize动态设置style.backgroundImage
真正按需加载？得用 picture + JS 回退或 CSS-in-JS
当必须确保「只加载匹配设备的图片」时，background-image 就不是合适载体了。推荐把背景图转为语义化 img 元素，用 picture + srcset + sizes 精确控制：
立即学习“前端免费学习笔记（深入）”；
<picture> <source media="(max-width: 480px)" srcset="/img/banner-mobile.jpg"> <source media="(max-width: 768px)" srcset="/img/banner-tablet.jpg"> <source srcset="/img/banner-desktop.jpg"> <img src="/img/banner-fallback.jpg" alt="Banner"> </picture>
再用 CSS 把 img 覆盖全容器，并设 object-fit: cover。这样所有现代浏览器都能按条件加载且不发多余请求。JS 回退方案（如监听 matchMedia）只在需要动态更新背景时才值得加。
关键点在于：CSS 背景图的「适配」本质是视觉呈现，而「动态加载」是资源调度——后者不在 CSS 职责范围内。强行用 CSS 媒体查询模拟，容易忽略图片实际是否被下载，反而影响性能。
