image-set() 不能单独使用，必须配合 url() 和 -webkit-image-set() 三行 fallback 声明，且顺序、引号、路径、单位（1x/2x）必须严格一致；Firefox v128 及之前完全不解析，安卓 WebView 仅认 -webkit 版本，Chrome ≥121/Safari ≥16.4 才原生支持，否则整条声明被静默丢弃。
image-set() 不能单独用，一写就失效，尤其在 Firefox 和多数安卓 WebView 中——整条声明会被静默丢弃，背景图直接消失。
为什么 background-image: image-set() 经常不生效
Firefox（v128 及之前）完全不解析 image-set()，不是降级，是跳过整行；安卓微信 X5、鸿蒙 WebView 等只认 -webkit-image-set()；Chrome ≥121 / Safari ≥16.4 才原生支持 image-set()。DevTools 里看到该行被划掉、Console 没报错但图没加载，基本就是这个原因。
必须写的三行 fallback 声明顺序
-
background-image: url("logo@1x.png");—— 所有浏览器兜底，必须放在最前 -
background-image: -webkit-image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);—— 必须紧接其后，路径、引号、空格、单位（1x/2x）要和下一行完全一致 -
background-image: image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x);—— 放最后，现代浏览器才识别
顺序错、1x 缺失、路径没引号（比如写成 url(logo@2x.png)）、引号混用（双+单），都会导致 Safari 旧版或某些 WebView 整条丢弃。
image-set() 只看 DPR，不看屏幕宽度
image-set() 的判断依据只有设备像素比（DPR），不是视口宽度。iPhone 14 Pro（DPR=3，宽 390px）和 MacBook Pro（DPR=2，宽 1792px）可能都加载同一张 @2x.png，但前者需要 200×200px 物理尺寸，后者需要 400×400px——尺寸错配必然模糊。
- 验证当前 DPR：Chrome DevTools → ⚙️ Settings → Rendering → 勾选 “Device pixel ratio”
-
background-size: cover会强制缩放，所以@2x图的物理尺寸必须是 CSS 尺寸 ×2（如元素width: 100px; height: 50px;，则@2x图应为 200×100px） - 想按宽度 + DPR 双重适配？得先用
@media (min-width: 768px)切断点，再在每个断点内套image-set()
构建工具路径别名在 image-set() 里无效
image-set() 不走 Webpack/Vite 构建流程，url(@/assets/logo@2x.png) 或 url(~assets/logo@2x.png) 会 404。必须写真实相对路径或绝对路径，且所有 url() 中的路径要完全一致（包括斜杠方向、大小写、扩展名）。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的点：它不支持 sizes 或 w 描述符，也不支持 srcset 那套逻辑；它只做 DPR 映射，仅适合图标、按钮这类构图不变、只需缩放的场景。Banner 或 Hero 图这种需艺术指导的，还是老实用媒体查询分层写 background-image 更稳。
