firefox v128完全不支持image-set()，会静默跳过整条声明导致背景空白；必须按顺序写三行fallback：url()兜底、-webkit-image-set()前置、image-set()在后，且路径、引号、空格、描述符须完全一致。
image-set() 在 Firefox 中根本不会执行
写了 background-image: image-set(...) 却没效果，大概率不是你写错了，而是 Firefox（v128 仍如此）直接跳过整条声明——DevTools 里那行被划掉，控制台零报错，但背景就是空白。它不降级、不 fallback，等于对 Firefox 用户主动隐藏图片。Chrome 和 Safari 虽支持，但只认严格语法；Safari ≤15.3 还要求必须带 1x 描述符，漏了就整条丢弃。
三行 fallback 必须按顺序硬写，不能省也不能合并
真正能跑通的最小可行写法是这三行并列，缺一不可，且顺序不能调换：
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);
-
url()是所有浏览器都认的兜底，必须写在最前 -
-webkit-image-set()必须紧接其后，否则 Safari ≥16.4 可能漏掉1x项 - 所有路径、引号类型（全用双引号或全用单引号）、空格、
1x/2x的x字符必须完全一致，差一个空格都可能被静默丢弃 - 构建工具（Vite/Webpack）不处理
image-set()里的路径，logo-2x.png没打进dist目录，高 DPR 屏就 404
别指望它响应屏幕宽度，它只看设备像素比
image-set() 的判断依据只有 dpr，和 @media (min-width: 768px) 无关。iPad Pro 横屏（2x + 宽屏）和 iPhone 竖屏（3x + 窄屏）都会加载同一个 2x 或 3x 图，构图无法适配。想做艺术指导（art direction），比如横屏用宽幅图、竖屏用特写图，必须放弃 image-set()，改用媒体查询分断点写多组 background-image 声明。
容器样式不匹配会让高清图白加载
即使 2x 图成功加载，渲染仍可能模糊。常见原因：
- 容器没设显式宽高，或
background-size是auto—— 高清图被拉伸/压缩，像素不对齐 -
background-size设为cover或contain时，若原始图比例与容器不匹配，依然会失真 - 伪元素或 flex/grid 子项中使用时，父容器未设
position: relative或未触发 BFC，导致层叠或尺寸计算异常
真正落地时，image-set() 只适合图标、按钮装饰等构图固定、仅需缩放的场景；复杂背景图建议直接用媒体查询覆盖，更可控、更少坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
