Firefox（截至v128）完全不支持image-set()，整条声明被静默丢弃，需用多条background-image声明叠加降级，且-webkit-image-set()必须前置、1x不可省略、路径须加引号。
background-image: image-set() 为什么在 Firefox 里完全不生效
因为 Firefox（截至 v128）压根不解析 image-set()，整条声明会被静默丢弃，不是降级，是彻底跳过。你看到背景图消失、DevTools 里该行被划掉、Console 没报错但也没加载任何图——基本就是这个原因。
必须用 fallback 声明兜底，且不能写成逗号分隔：background-image: url("fallback.png"), image-set(...) 是无效语法。正确做法是叠加多条独立声明：
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);
浏览器从上到下执行，不支持的就跳过，最终生效的是它能识别的最后一项。
-
-webkit-image-set()必须写在image-set()前面，否则 Safari ≥16.4 可能忽略 -
1x项不能省略，旧版 Safari 遇到缺失1x会整条丢弃 - 所有路径必须统一用引号包裹，比如
url("logo@2x.png")，不能写成"logo@2x.png" 2x
Chrome/Safari 中 image-set() 加载了错误倍率图？检查 DPR 和物理尺寸是否匹配
Chrome 和 Safari 虽然支持 image-set()，但它只看 device-pixel-ratio，不看视口宽度。iPhone 竖屏（375px 宽、DPR=3）和 MacBook Pro（1440px 宽、DPR=2）可能都加载同一张 @2x 图，结果前者拉伸模糊、后者画布太小。
立即学习“前端免费学习笔记（深入）”；
验证当前设备 DPR：打开 Chrome DevTools → ⚙️ Settings → Preferences → Rendering → 勾选 “Device pixel ratio”，看右上角显示值是否与你写的 1x/2x 匹配。
- CSS 设定
width: 100px; height: 50px;，那@2x图就得是200×100px物理尺寸，否则background-size: cover会强制缩放 - 路径不能用 Webpack/Vite 的
@/assets或~别名，image-set()不走构建工具解析流程 - 不要依赖
sizes或w描述符——image-set()不支持这些
想按屏幕宽度 + DPI 双重适配？别只靠 image-set()，得用媒体查询分层控制
image-set() 只响应 DPR，无法区分“小屏高 DPR”和“大屏低 DPR”。iPad Air（DPR=2，宽 820px）和 Windows 笔记本（DPR=1，宽 1920px）需要完全不同尺寸的图，但 image-set() 给的永远是同一组分辨率图。
真正可控的做法是：先用 @media (min-width: 768px) 切断点，再在每个断点内用 image-set() 或单独 background-image 控制 DPR：
@media (max-width: 767px) {
.hero { background-image: url("hero-mob-1x.jpg"); }
}
@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2),
(min-width: 768px) and (min-resolution: 192dpi) {
.hero { background-image: url("hero-desk-2x.jpg"); }
}
- 媒体查询方案兼容 IE11（用
-webkit-min-device-pixel-ratio）、Firefox、所有现代浏览器 - 不能在
@media内部再套image-set()，CSS 不允许函数嵌套 - 关键内容图建议改用 HTML 的
<picture>+srcset，语义更强、预加载可控
移动端 WebView 里 image-set() 失效？注意 -webkit-image-set 的路径和单位要求
安卓微信 X5、鸿蒙 WebView 等环境只认 -webkit-image-set()，且对路径和单位更敏感：必须用绝对路径或严格相对路径，2x 要写成 2dppx（部分版本不认 2x），空格或引号不一致都会导致解析失败。
验证方式很简单：打开移动端 DevTools（如 Chrome Remote Debugging），看 Elements → Styles 面板中 background-image 是否被划掉；或者 Console 搜 parse，看有没有 Failed to parse 相关提示。
- 两个声明中的路径、引号类型（全用双引号或全用单引号）、空格数量必须完全一致
- Autoprefixer 默认不处理
image-set()，需手动开启实验性特性支持 - 别指望它“异步加载”——
image-set()不触发预加载，只在渲染时选一个源，其余图根本不会发请求
1x 项缺失、路径用了构建别名、以及以为写了 image-set() 就自动覆盖所有场景——它只管 DPR，不管宽度、网络、用户设置，也不保证图片物理尺寸匹配 CSS 占位。 
