image-set()目前仅Safari 16.4+和Chrome 121+原生支持，Firefox完全不识别；安卓微信X5内核、鸿蒙WebView等定制环境需用-webkit-image-set()且要求绝对路径，且仅认dppx而非device-pixel-ratio。
image-set() 在 Chrome/Firefox/Safari 中到底支不支持
原生 image-set() 语法（不带前缀）目前仅在 Safari 16.4+ 和 Chrome 121+ 中稳定支持，Firefox 完全不识别，旧版 Chrome（-webkit-image-set()。这意味着写 background-image: image-set(...) 在绝大多数真实用户环境里会直接退化为无背景图——CSS 解析失败时该声明被整条丢弃，不是“降级”，是“失效”。
验证方法很简单：打开 DevTools → Elements → Styles 面板，看对应样式行是否被划掉；再切到 Console，搜 Failed to parse 或类似提示。别信 CanIUse 上的“部分支持”描述，它没告诉你 Firefox 连解析都跳过。
必须加 -webkit- 前缀，但不能只加一个
只写 background-image: -webkit-image-set(...) 是常见错误。现代 Chrome（≥121）已同时支持带前缀和不带前缀两种写法，但若你只提供带前缀版本，Safari 16.4+ 反而可能因优先级或解析顺序问题忽略它——尤其当后面还跟着一条无前缀的 image-set() 声明时（哪怕被注释掉）。
正确写法是双保险并列：
background-image: -webkit-image-set(url('icon-1x.png') 1x, url('icon-2x.png') 2x);
background-image: image-set(url('icon-1x.png') 1x, url('icon-2x.png') 2x);
注意两点：
- 两条声明必须紧挨着，且
-webkit-版本在前 - 路径、单位（
1x必须带单位）、括号空格格式完全一致，否则 Safari 可能只认其中一个 - 不要用
url("...")和url('...')混搭，某些旧 WebKit 内核对引号敏感
Autoprefixer 能不能自动补前缀
能，但默认不处理 image-set() —— 它被归类为“实验性特性”，需显式开启。在 postcss.config.js 中启用需加配置项：
require('autoprefixer')({
overrideBrowserslist: ['last 2 versions', 'iOS >= 15', 'Chrome >= 110'],
features: { 'image-set': true }
})
否则即使你写了标准语法，Autoprefixer 也当它不存在。另外注意：features: { 'image-set': true } 不会生成 -moz-image-set（Firefox 从没实现过），只补 WebKit 前缀。
验证是否生效：检查构建后 CSS 文件中是否出现双行声明；如果只有一行，说明 Autoprefixer 没触发，大概率是配置漏了 features 或浏览器列表太宽松（比如包含 Firefox >= 100 会直接跳过）。
真正容易被忽略的兼容性断点
很多人测完 iPhone 和 Mac 就以为 OK，结果安卓微信内置浏览器（X5 内核）或鸿蒙系统 WebView 里图片全白——因为这些环境用的是定制 WebKit，-webkit-image-set() 支持不完整，甚至要求路径必须是绝对路径（/assets/icon.png），相对路径（../icon.png）直接报错不加载。
更隐蔽的问题是分辨率判断逻辑：image-set() 只认 dppx（dots per px），不认 device-pixel-ratio。某些安卓设备上报 2dppx 但实际渲染模糊，image-set() 还是会强行塞 2x 图过去。这时候你得配合 @media (-webkit-min-device-pixel-ratio: 2) 手动兜底，而不是指望一行 image-set() 解决所有事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
