image-set() 在真实项目中基本不可用——firefox v128 完全不解析，safari 和 chrome 支持脆弱，漏写 1x、路径未加引号或单位错误均导致整条声明静默忽略，背景空白；它只响应 dpr 而非视口宽度，无法兼顾小屏高清与大屏高清需求。
image-set() 在真实项目中基本不可用——Firefox v128 仍完全不解析它，Safari 和 Chrome 虽支持但极其脆弱：漏写 1x、路径没加引号、单位写成 2 而非 2x，都会导致整条声明被静默忽略，背景图直接空白。
为什么写了 image-set() 还是模糊或没效果
不是你代码写错了，而是浏览器压根没执行它：
- Firefox v128 会跳过整行
background-image: image-set(...)，不报错、不加载、不 fallback —— 结果就是背景空白 - Safari ≤15.3 遇到漏写
1x项，直接丢弃整个函数，连兜底图都不显示 -
url(logo@2x.png)没加引号，或单位写成2xpx/2，Chrome/Safari 也会整条忽略 - 构建工具（Vite/Webpack）默认不扫描
image-set()里的url()，logo@2x.png没进dist就是 404，高分屏 fallback 到1x后照样糊
image-set() 只认 DPR，不响应视口宽度
它不会因为你开了 width: 1920px 的视口就选更大图——只看设备像素比（DPR）：
- iPhone 14 Pro（DPR=3）永远匹配
3x，哪怕你 CSS 设了width: 100px - MacBook Pro（DPR=2）永远走
2x，哪怕你缩放浏览器到 50% - Windows 笔记本（DPR=1）即使屏幕宽 1920px，也只加载
1x图，物理尺寸小了就会拉伸模糊
所以单靠 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);
- 第一行是兜底，所有浏览器都认；不能写成
background-image: url() , image-set()（非法语法） -
-webkit-image-set()必须在image-set()前面，否则 Safari ≥16.4 可能漏掉1x项 - 所有
url()必须加引号，路径含@或空格时尤其关键（如url("icon@2x.png")） -
1x项不能省略，单位必须带x，不能写dppx或2
真正能落地的替代方案
放弃 image-set()，改用更可控的方式：
-
背景图：用复合媒体查询 +
background-size，例如：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { .bg { background-image: url("bg@2x.png"); background-size: 100% auto; } } -
内容图片：用语义化
<picture></picture>+srcset+sizes，浏览器原生支持、可预加载、兼容性好 - 图标类：优先用 SVG，矢量无损缩放，不用适配
最常被忽略的一点：background-image 模糊，90% 不是因为没换图，而是忘了设 background-size —— 即使加载了 @2x 图，没指定尺寸仍会被二次插值拉伸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
