image-set() 模糊主因是仅按dpr选图而忽略视口宽度，且firefox不支持、安卓需-webkit前缀；可靠方案需三层兜底并确保路径、单位、background-size等全链路对齐。
background-image 用 image-set() 为什么还是糊
因为 image-set() 只按设备像素比（DPR）选图，不看视口宽度。iPhone 竖屏（375px 宽、DPR=3）和 MacBook（1440px 宽、DPR=2）可能都加载同一张 @2x.png，但前者需要 200×200px 物理尺寸，后者需要 400×400px——尺寸错配就必然拉伸模糊。
常见错误现象包括：
- DevTools 的 Styles 面板里
background-image: image-set(...)被整行划掉 - Console 报
Failed to parse value for 'background-image' - 实际加载的是 fallback 图（比如只看到
@1x.png），@2x.png根本没发请求
根本原因不是写法“不够高级”，而是浏览器压根没识别这条规则——Firefox 至今（v128）完全不支持 image-set()，安卓 WebView 多数只认 -webkit-image-set()，且要求路径绝对、单位必须是 dppx 或带 x 后缀。
移动端 background-image 高清适配的可靠写法
别指望单靠 image-set() 一招通吃。真实项目中必须分层兜底：
- 最上层写
background-image: url("icon@1x.png");—— 所有浏览器都能显示 - 中间层写
background-image: -webkit-image-set(url("icon@1x.png") 1x, url("icon@2x.png") 2x);—— 专供安卓微信 X5、旧版 Safari - 最下层写
background-image: image-set(url("icon@1x.png") 1x, url("icon@2x.png") 2x);—— Chrome ≥121 / Safari ≥16.4 原生支持
注意三点：
-
-webkit-版本必须在前，否则 Safari 16.4+ 可能跳过整条声明 - 路径必须用
url()包裹，且引号类型（单/双）三行必须一致；含@的文件名如"icon@2x.png"必须加引号 - 分辨率描述符必须带单位：
1x✅，2❌，2xpx❌
为什么不能只靠 @media 查询 + device-pixel-ratio
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) 确实兼容性更好，但它没法解决“同 DPR 不同物理尺寸”的问题。比如 iPad Air（DPR=2，宽 820px）和 Android 平板（DPR=2，宽 600px）都会命中同一段媒体查询，但背景图 CSS 尺寸（width/height）若固定为 100px，@2x 图就得是 200×200px —— 这对大屏够用，小屏却可能被缩放失真。
更关键的是：媒体查询本身不加载资源，它只是切换 background-image 值。如果你没同步调整 background-size，比如漏写了 background-size: 24px 24px;（对应设计稿原始尺寸），浏览器就会按默认 background-size: auto 拉伸填充，再高清的图也白搭。
容易被忽略的渲染陷阱
很多模糊问题其实和 image-set() 无关，而是 CSS 渲染链路被干扰：
-
background-image完全不响应image-rendering属性，设了也无效 - 父容器用了
transform: scale(0.9)或flex布局导致子元素计算尺寸偏差，图片实际渲染宽高 ≠ CSS 声明值 - 构建工具（如 Vite）不解析
image-set()中的路径，icon@2x.png文件缺失时编译无报错，运行时静默 404 - Chrome DevTools 的 Rendering 面板没开 “Device pixel ratio” 覆盖，你根本不知道当前模拟的 DPR 是多少，调试等于盲调
真正要稳，得把 device-pixel-ratio 实测值、图片物理像素、CSS 声明尺寸、background-size 四者对齐——少一个环节，高清就变“高清幻觉”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
