结论：image-set() 在真实项目中必须搭配 -webkit-image-set() 和 url() fallback，否则 Firefox 等浏览器会彻底不显示背景图；因其兼容性差、解析即丢弃、移动端限制严，需严格按顺序、引号、单位、路径一致性书写，并通过 DevTools 验证是否生效。
直接说结论：用 image-set() 实现多倍图自适应，在真实项目中几乎必须搭配 -webkit-image-set() 和 url() fallback，否则 Firefox 会彻底不显示背景图，旧版 Edge 也会失效。
为什么 background-image: image-set() 在大多数浏览器里等于没写
Firefox（截至 v128）完全不识别 image-set()，解析时直接跳过整条声明——不是降级，是丢弃。Chrome ≥121 和 Safari ≥16.4 才原生支持，但安卓微信 X5、鸿蒙 WebView 等大量移动端环境只认 -webkit-image-set()，且要求路径为绝对路径、单位必须用 dppx（不能用 device-pixel-ratio）。DevTools 里看到该样式被划掉，或 Console 报 Failed to parse，基本就是这个原因。
验证方式很简单：
– 打开 DevTools → Elements → Styles 面板，找对应 background-image 行是否被划掉
– 切到 Console，搜 parse 或 image-set
正确的声明顺序和写法细节
必须按固定顺序并列写两条声明，且格式严格一致：
background-image: -webkit-image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);background-image: image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);
关键点：
-
-webkit-版本必须在前，否则 Safari 16.4+ 可能忽略 -
1x不能省略——旧版 Safari 会整条丢弃声明 - 路径必须加引号，尤其含空格或
@符号时（如"logo@2x.png"） - 两个声明里的路径、单位、空格、引号类型（全用双引号或全用单引号）必须完全一致
- Autoprefixer 默认不处理
image-set，需手动开启实验性特性支持
fallback 必须写在最前面，且不能靠逗号分隔
错误写法：background-image: url("logo@1x.png"), image-set(...);
这是无效的——CSS 不支持 background-image 多值逗号分隔（那是 background 简写才有的语法）。
正确 fallback 方式是叠加声明：
background-image: url("logo@1x.png");background-image: -webkit-image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);background-image: image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);
浏览器从上到下解析，不支持的声明会被跳过，最终生效的是它能识别的最后一项。
image-set 和媒体查询方案怎么选
image-set() 只响应设备像素比（dpr），不响应视口宽度或网络条件。适合纯高清适配场景，比如 logo、icon 这类小尺寸、语义固定的元素。
但如果你需要“大屏 + 高清”双重判断（例如：桌面端 dpr≥2 且宽度 ≥1200px 才加载 @3x 图），就必须用 @media：
@media (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 2)@media (min-width: 1200px) and (resolution: 2dppx)
另外注意：image-set() 中的图片不会预加载，首次渲染可能短暂模糊或闪烁；而媒体查询配合 background-image 是静态声明，更可控。
真正容易被忽略的点是：你写的 image-set() 是否真被浏览器执行了，还是默默失效了。别只看 CanIUse 的“支持列表”，得在真机、微信、鸿蒙等实际环境里打开 DevTools 看解析结果——很多所谓“兼容写法”，只是看起来没报错而已。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
