结论：image-set() 适配盒模型背景图在真实项目中几乎不可靠——仅响应 dpr、不响应视口宽度，firefox 完全不支持，移动端 webview 兼容性极差；可靠方案是媒体查询 + 多层 background-image 覆盖。
直接说结论：用 image-set() 适配盒模型背景图，在真实项目中几乎不可靠——它只响应设备像素比（DPR），不响应视口宽度，且 Firefox 完全不支持，移动端 WebView 兼容性极差；真正能落地的方案是媒体查询 + 多层 background-image 覆盖。
为什么 image-set() 在盒模型背景下容易失效
盒模型本身不影响 image-set() 解析，但实际使用中常因叠加声明、fallback 缺失或层叠顺序错乱导致降级失败。常见现象包括：background-image: image-set(...) 在 DevTools 中被整行划掉、Firefox 下背景彻底空白、Safari 16.4 以下版本加载 1x 图后不再切换。
- 浏览器从上到下解析
background-image声明，只要某条声明语法错误或不支持，就跳过，继续尝试下一条 - 如果漏写
-webkit-image-set()或顺序颠倒（image-set()写在前面），Safari 可能忽略整个声明 - 盒模型中的
background-size: cover或background-position: center不影响image-set()的资源选择逻辑，但会放大 DPR 切换不准确带来的模糊感 - 路径含空格或特殊字符（如
logo@2x.png）未加引号时，旧版 Safari 直接解析失败
必须写的三行声明顺序（缺一不可）
要让 image-set() 在有限环境里“勉强可用”，必须严格按此顺序并列书写，不能合并、不能逗号分隔：
background-image: url("/img/logo-fallback.png");
background-image: -webkit-image-set(url("/img/logo-1x.png") 1x, url("/img/logo-2x.png") 2x);
background-image: image-set(url("/img/logo-1x.png") 1x, url("/img/logo-2x.png") 2x);
- 第一行是兜底，所有浏览器都认；不能写成
background-image: url(...) , image-set(...)—— 这是非法语法 -
-webkit-image-set()必须在image-set()之前，否则 Safari 16.4+ 可能跳过 - 两个函数里的路径、引号类型（统一用双引号）、单位（只用
1x/2x，不用dppx）、空格数必须完全一致，否则部分引擎静默丢弃整条声明 - 服务器需返回正确的
Content-Type（如image/png），否则 Safari 会降级到 1x 并不报错
更推荐的替代方案：媒体查询 + background-image 覆盖
对盒模型容器（比如 .hero、.card）做响应式背景适配，应放弃 image-set()，改用媒体查询控制不同断点下的 background-image：
@media (max-width: 767px) {
.hero { background-image: url("/img/hero-mobile.jpg"); }
}
@media (min-width: 768px) and (max-width: 1023px) {
.hero { background-image: url("/img/hero-tablet.jpg"); }
}
@media (min-width: 1024px) {
.hero { background-image: url("/img/hero-desktop.jpg"); }
}
- 每条规则独立生效，无兼容性陷阱，Firefox/Chrome/Safari/Edge 全支持
- 可结合
background-size: cover和background-position针对不同构图做艺术指导（art direction），这是image-set()根本做不到的 - 若需 DPR 适配，可在每个媒体查询内再嵌套
image-set()（仅当确定目标环境支持时），例如background-image: image-set(url("hero-desktop-1x.jpg") 1x, url("hero-desktop-2x.jpg") 2x); - 注意层叠顺序：后写的媒体查询规则会覆盖前面的，所以按从小到大或从大到小排列要保持逻辑一致
真正麻烦的不是写法，而是误以为 image-set() 能解决“响应式背景图”这个需求——它只解决“同一张图在不同 DPR 下清晰显示”，而盒模型容器的响应式背景，本质是多尺寸、多构图、多语义的资源决策，必须交给媒体查询或 JS 控制。别在 fallback 机制不透明、DevTools 验证困难、线上灰度难排查的地方硬扛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
