Firefox完全不支持image-set()，连解析都跳过，必须前置url() fallback并并列声明-webkit-image-set()和image-set()以实现跨浏览器兼容。
Firefox 完全不支持 image-set()，连解析都跳过，不是“加载失败”，是整条声明被丢弃。 你看到背景图没出来，大概率是因为只写了 image-set()，而没配 url() fallback——Firefox 直接忽略那行 CSS，退回到上一条有效的 background-image 声明（如果没有，就是透明）。
Firefox 不解析 image-set() 是硬限制，不是 bug
截至 Firefox 128（2026 年 4 月最新稳定版），image-set() 仍无任何实现：既没有默认开启，也没有 about:config 开关，更没有实验性 flag。MDN 明确标注为 “Not supported”。这意味着：
- DevTools 的 Styles 面板里，
background-image: image-set(...)这一行会被直接划掉（not parsed） - Console 不会报错，但也不会触发任何图片请求——网络面板里根本看不到对应资源
-
@supports (background-image: image-set("a" 1x))永远返回false，无法用于条件包裹
url() fallback 必须写在 image-set() 前面，且不能共用一行
CSS 层叠规则决定了：浏览器按顺序解析声明，遇到不识别的值就跳过整条语句。所以 fallback 必须是独立、可解析的 background-image: url(...)，且必须出现在 image-set() 声明之前：
/* ✅ 正确：Firefox 用第一行，Chrome/Safari 用第二行 */
.element {
background-image: url("icon-1x.png");
background-image: -webkit-image-set(url("icon-1x.png") 1x, url("icon-2x.png") 2x);
background-image: image-set(url("icon-1x.png") 1x, url("icon-2x.png") 2x);
}关键点：
立即学习“前端免费学习笔记（深入）”；
- 不能写成
background-image: url(...) , image-set(...)—— 这是非法语法，整行失效 - 不能把
url()放在image-set()后面，否则 Firefox 会用空值覆盖前面的合法值 - 路径必须真实存在且可访问；若用构建工具别名（如
@/assets/icon.png），CSS 里不会解析，得换成相对或绝对 URL
-webkit-image-set() 和 image-set() 要并存，顺序不能乱
现代 Chrome（≥121）和 Safari（≥16.4）同时认两种写法，但行为有差异：
- 只写
-webkit-image-set()：Safari 16.4+ 可能因优先级或解析缓存忽略它 - 只写
image-set()：Firefox 无视，旧版 Chrome（ - 正确做法是紧挨着写两行，
-webkit-版本必须在前，且参数完全一致（引号类型、空格、单位）
例如，下面这种写法会导致 Safari 只加载 1x：
background-image: -webkit-image-set(url('icon.png') 1x, url('icon@2x.png') 2x);
background-image: image-set(url("icon.png") 1x, url("icon@2x.png") 2x); /* 引号不一致 → Safari 可能拒识 */真正容易被忽略的一点：没有 sizes，也没有加载时机控制
image-set() 只看 dppx（等价于 device-pixel-ratio），不感知视口宽度、网络状况或元素尺寸。这意味着：
- MacBook Pro 视网膜屏（2x）永远走 2x 图，哪怕窗口缩到 400px 宽
- 安卓微信 X5 内核只认
-webkit-image-set()且强制要求绝对路径 +dppx单位（不能写2x） - 首次渲染时，浏览器不会预加载非匹配项，可能闪一下低清图再切高清——这和
srcset的预加载逻辑完全不同
