image-set()必须配合url()和1x/2x等分辨率描述符使用，仅适用于background-image；漏写描述符、用于<img>或无fallback会导致失效，且Firefox完全不支持。
background-image: image-set() 必须配合 url() 和 1x/2x 描述符
直接写 background-image: image-set("a.png", "b@2x.png") 是无效的——浏览器会整条忽略。image-set() 不是简单罗列路径，它必须为每个 url() 显式标注分辨率描述符：1x、2x 或 3x（注意：x 是必需字符，不能省略或写成 dppx）。路径也必须用 url() 包裹，不能裸写字符串。
正确写法示例：
background-image: image-set(
url("logo-1x.png") 1x,
url("logo-2x.png") 2x,
url("logo-3x.png") 3x
);
-
1x项不能省略，否则旧版 Safari（≤15.3）会静默丢弃整条声明 - 路径含空格或
@符号时，url()内部必须加引号，如url("icon@2x.png") - 多个条目用逗号分隔，函数整体作为
background-image的唯一值，不能和其他值用逗号拼接
Firefox 完全不支持，必须靠 fallback + -webkit 前缀兜底
截至 Firefox v128（2026 年 6 月），image-set() 仍被完全忽略——不是降级，是解析时直接跳过该行声明，结果就是背景图消失。Chrome ≥121 和 Safari ≥16.4 原生支持，但安卓微信 X5、部分鸿蒙 WebView 只认 -webkit-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()之前，否则 Safari 16.4+ 可能漏掉1x项 - 三行里的路径、引号类型（全用单引号或全用双引号）、空格、单位必须完全一致，否则某些浏览器会因校验失败而丢弃整条
- 构建工具（Vite/Webpack）默认不处理
image-set()中的url()，若"logo-2x.png"没被复制进dist目录，运行时就是 404，高分屏照样模糊
它只响应 DPR，和屏幕宽度无关
image-set() 的判断依据只有设备像素比（DPR），比如 iPhone 14 Pro（DPR=3）永远匹配 3x，MacBook Pro 视网膜屏（DPR=2）永远走 2x，哪怕你设了 width: 200px —— 它不会因为视口变宽就换更大尺寸的图。
常见模糊原因其实是物理尺寸错配：
- CSS 设定
width: 100px; height: 50px;，但logo-2x.png是 150×75px（而非标准的 200×100px），background-size: cover就会拉伸失真 - 想让 iPad Air（DPR=2，宽 820px）和 Windows 笔记本（DPR=1，宽 1920px）加载不同画布尺寸的图？
image-set()无能为力，必须用媒体查询分层控制 - 它不预加载非匹配资源，首次渲染时可能短暂模糊或闪烁——这不是 bug，是设计如此
别把它和 <img> 的 srcset 混用
image-set() 只作用于 background-image，对 <img src="..."> 完全无效。给 <img> 标签写 style="background-image: image-set(...)” 也不会生效，因为语义和渲染机制完全不同。
需要语义化、可访问、支持宽高适配或格式切换（如 webp → jpg）的场景，必须用原生方案：
<img src="logo-1x.png" srcset="logo-1x.png 1x, logo-2x.png 2x"><picture><source media="(min-width: 768px)" srcset="hero-desktop.webp"...><img src="hero-mobile.jpg"></picture>
真正容易被忽略的是：即使你写了完美的 image-set()，只要图片物理尺寸没按 DPR 等比放大、构建路径没被正确处理、或忘了给 Firefox 提供 url() fallback，高分屏依然会糊——它不是开关，是一整套需严丝合缝的链路。
