必须按顺序写三遍background-image才能兼容各内核：兜底url()、-webkit-image-set()适配安卓微信和旧safari、原生image-set()用于新版chrome/safari；漏掉任一将导致firefox不显示或x5内核降级使用@1x图。
background-image: image-set() 在移动端根本不会自动生效
它不是“写了就适配”，而是浏览器按当前 device-pixel-ratio 从列表里挑一个最接近的图加载——但这个逻辑在安卓 WebView、鸿蒙 WebView、微信 X5 内核里基本不跑，它们要么直接跳过整条声明，要么只认 -webkit-image-set()。Safari 在页面缩放 ≠ 100% 时 DPR 判定也会失准，导致选错图。所以别指望靠一行 image-set() 解决问题。
必须写三遍 background-image 才能覆盖主流环境
真实项目中，你得按顺序叠加三条声明，让不同内核各取所需：
-
background-image: url("icon@1x.png");—— 兜底，所有浏览器都认 -
background-image: -webkit-image-set(url("icon@1x.png") 1x, url("icon@2x.png") 2x);—— 安卓微信、旧版 Safari 专用，-webkit-必须写在前面 -
background-image: image-set(url("icon@1x.png") 1x, url("icon@2x.png") 2x);—— Chrome ≥121 / Safari ≥16.4 原生支持
漏掉任意一条，Firefox 就彻底不显示背景图（它连解析都不做），X5 内核则默认 fallback 到 @1x 图，高分屏照样糊。
路径、单位、引号一个都不能错
常见静默失效原因全是语法细节：
- 路径必须用
url()包裹，不能直接写"icon@2x.png" 2x，否则部分 Safari 报Failed to parse value for 'background-image' - 单位必须带
x，写成1x✅，写成1或2xpx❌ - 所有引号类型要统一（全用双引号或全用单引号），且含
@符号的文件名必须加引号，否则构建工具可能误判路径 - Vite/Webpack 不扫描
image-set()里的url()，icon@2x.png若没被复制进dist目录，Network 面板只会看到 404，而 Styles 面板里那行直接被划掉
image-set() 无法解决“尺寸错配”导致的模糊
它只管选哪张图，不管这张图该以多大物理尺寸渲染。比如 CSS 设了 width: 100px; height: 50px;，但你给的 @2x 图是 150×75px，background-size: cover 会强行拉伸，视觉上还是糊。真正要防模糊，还得配合：
- 确保 @2x 图物理尺寸 = CSS 声明宽高 × 2（如 100×50px 的容器，配 200×100px 的图）
- 显式设
background-size: 100% 100%或具体像素值，避免auto导致拉伸 - 关键图标优先用 SVG——矢量图无像素比概念，缩放不糊，也省去所有
image-set的兼容折腾
最隐蔽的问题是：即使所有声明都写对、图片也都加载成功，只要容器没有固定宽高，或 background-size 缺失，高清图照样会被浏览器二次缩放——这时再检查 image-set 语法已经没用了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
