image-set()在真实项目中必须严格按三行fallback顺序书写：url()兜底、-webkit-image-set()前置、image-set()居后，且引号、单位、路径、空格必须完全一致，否则firefox v128静默跳过导致背景图消失，旧版safari可能整条丢弃。
直接说结论：image-set() 在真实项目中必须写三行，顺序不能错、引号不能混、单位不能漏，否则 Firefox 会彻底不显示背景图，旧版 Safari 可能静默丢弃整条声明。
为什么 Firefox 里 background-image: image-set() 等于没写
Firefox v128（2026 年 6 月）仍完全不解析 image-set()，既不降级也不报错，而是整行跳过——结果就是背景图消失。DevTools 里该样式被划掉、Console 没报错但图没加载，基本就是这个原因。
-
-webkit-image-set()必须写在image-set()之前，否则 Safari ≥16.4 可能漏掉 1x 项 - 1x 项不可省略，旧版 Safari（≤15.3）遇到缺失 1x 会整条丢弃声明
- 三行中的路径、引号类型（全用
"或全用'）、空格、单位必须完全一致，否则某些浏览器校验失败直接跳过
Chrome/Safari 中 image-set() 加载了错误倍率图？检查 DPR 和物理尺寸是否匹配
image-set() 只响应设备像素比（DPR），不看视口宽度。iPhone 竖屏（375px 宽、DPR=3）和 MacBook Pro（1440px 宽、DPR=2）可能都加载同一张 @2x.png，但前者需要更小画布、后者需要更大尺寸，结果就是拉伸模糊。
- 在 Chrome DevTools → Settings → Rendering → 勾选 “Device pixel ratio”，确认当前 DPR 值是否与你写的
1x/2x匹配 - CSS 设定
width: 100px; height: 50px;，那@2x.png就得是 200×100px 物理尺寸，否则background-size强制缩放会糊 - 路径不能用
@/assets或~别名——image-set()不走 Webpack/Vite 构建流程，必须是构建后真实存在的相对或绝对路径
安卓 WebView 和微信 X5 内核只认 -webkit-image-set()，且要求路径真实存在
多数安卓 WebView（包括微信 X5、部分鸿蒙 WebView）只识别 -webkit-image-set()，且对路径和单位极其敏感：路径必须是构建后真实存在的相对路径或绝对路径，单位只能是 1x/2x/3x，混用 dppx 或 w 描述符会导致整条失效。
-
url("icon@2x.png")中的@或空格必须加引号，否则解析失败 -
background-size必须显式设置（如24px 24px），不能是auto，否则高清图加载后仍被拉伸 - Vite/Webpack 默认不处理
image-set()里的资源引用，若icon@2x.png没复制进dist目录，运行时 404，高分屏照样 fallback 到 1x 图
fallback 必须写在最前面，且不能用逗号拼接
background-image: url("fallback.png"), image-set(...) 是无效语法——CSS 不支持 background-image 多值逗号分隔（那是 background 简写才有的）。正确方式是叠加声明，让浏览器从上到下自然降级。
- 正确顺序：
background-image: url("logo@1x.png");→background-image: -webkit-image-set(...);→background-image: image-set(...); - Autoprefixer 默认不处理
image-set()，需手动开启实验性特性支持，但前缀顺序和格式仍需人工校验 -
image-set()不支持<img>标签，想做语义化高清图，优先用<picture></picture>+srcset
最容易被忽略的点：三行声明里只要有一个字符不一致（比如一行用双引号、另一行用单引号，或一个空格多一个少），某些浏览器就会直接丢弃整条；而构建工具又不会帮你校验这个，只能靠 DevTools 的 Styles 面板逐行比对生效项。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
