image-set() 在真实项目中基本不可用——Firefox v128 完全不解析，Safari 和 Chrome 支持脆弱：漏写 1x、路径无引号、单位错误均导致整条声明被忽略；它只依据 DPR 选图，无法兼顾小屏高清与大屏高清；必须按顺序写三行声明（兜底 url + -webkit-image-set + image-set），且 url 必须加引号、1x 不可省略；推荐改用媒体查询、srcset 或 JS 动态设置方案。
image-set()在真实项目中基本不可用——Firefox 至今（v128）完全不解析它，Safari 和 Chrome 虽支持但极其脆弱；想靠它适配不同像素密度的屏幕，大概率会 fallback 失败、高分屏仍模糊，甚至背景图直接消失。
为什么 image-set() 写了却没效果
不是你写错了，而是浏览器压根没执行它：
- Firefox v128 会静默跳过整行
background-image: image-set(...)声明，不报错、不降级、不加载任何图——结果就是背景空白 - Safari ≤15.3 遇到漏写
1x项，会直接丢弃整个函数，连 fallback 都不走 - Chrome/Safari 若路径没加引号（如
url(logo@2x.png)），或单位写成2而非2x，也会整条忽略 - 构建工具（Vite/Webpack）完全不扫描
image-set()里的url()，logo@2x.png没进dist就是 404，高分屏 fallback 到 1x 后照样糊
image-set() 只认 DPR，不认屏幕宽
它不会因为你开了 1920px 宽的视口就选更大图——只看设备像素比（DPR）：
- iPhone 14 Pro（DPR=3）永远匹配
3x，哪怕你设了width: 200px - 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()，改用更可控的方式：
- 对盒模型容器（如
.hero、.card），用媒体查询分层：@media (min-width: 768px) and (-webkit-min-device-pixel-ratio: 2)单独控制 - 图标类小图，直接上
srcset+ - 关键背景图，用 JS 检测
window.devicePixelRatio动态设置 class，再由 CSS 控制background-image
最常被忽略的一点：就算 2x 图成功加载了，如果容器没有显式宽高，或 background-size 设为 auto，浏览器仍会拉伸压缩，导致像素不对齐——模糊不是没加载对，是渲染时就错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
