image-set() 并非万能方案，需满足浏览器支持（Safari 6.1+/Chrome 21+/Edge 12+，Firefox/IE不支持）、正确图片准备（@2x图须为物理尺寸翻倍）、严格fallback书写顺序及media query兜底，缺一即模糊。
image-set()能解决 Retina 屏背景图模糊，但只在特定条件下有效——它不是“写了就清晰”的银弹，而是需要匹配浏览器支持、图片准备方式和 fallback 机制。
为什么 image-set() 有时没效果
最常见原因是浏览器根本不识别这个函数，直接跳过，退回到后面的 url() 声明。Safari 6.1+、Chrome 21+、Edge 12+ 支持，但 Firefox 只支持 url() fallback（不解析 image-set() 内容），IE 完全不认。
- 检查控制台是否报
Invalid property value或静默忽略background-image: image-set(...) - 务必写 fallback：
background-image: url("icon.png"); background-image: image-set("icon.png" 1x, "icon@2x.png" 2x);—— 后者覆盖前者，顺序不能反 -
image-set()不支持w描述符（如800w），只接受1x/2x/3x；混用会整个失效 - 路径错误或资源 404 时，浏览器不会降级到 fallback 的
url()，而是渲染空白（需手动验证icon@2x.png确实可访问）
image-set() 的图片准备规则
它不帮你缩放，只做“按需取图”，所以你给的图必须是真正物理尺寸翻倍的版本，而不是用 PS 把 1x 图强行放大两倍保存出来的“假 @2x”。
-
icon.png是设计稿中逻辑尺寸（比如 24×24px），文件宽高就是 24×24 -
icon@2x.png必须是 48×48px（不是 24×24 再放大），否则高 DPR 下仍会插值拉伸 - 不支持 SVG 内嵌位图：如果
icon@2x.svg里用了<image href="photo.jpg"></image>，那这部分在 Retina 下依然糊 - 避免用构建工具自动加后缀却漏改引用路径——Webpack/Vite 的 asset 处理可能把
@2x当特殊字符过滤掉
兼容性兜底必须手动写媒体查询
image-set() 没有 fallback 到 min-resolution 的能力，Firefox 和旧 Safari 用户会直接看到 1x 图。真要全覆盖，得双保险：
- 先用
image-set()给现代浏览器简洁语法 - 再用
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)覆盖 Safari iOS 9–12 和部分 Android - 两个规则里都显式写
background-size，比如background-size: 24px 24px，否则 @2x 图会按 48×48 渲染成双倍 CSS 尺寸 - 不要依赖
background-size: cover自动适配——cover 在不同 DPR 下缩放比例不一致，容易裁错关键区域
伪元素和 image-set() 的坑
::before / ::after 用 image-set() 时，常因基础样式缺失导致背景压根不显示。
- 必须写
content: ""，否则伪元素无盒模型，background-image无效 - 必须设
display: block（或inline-block） + 显式width/height，否则尺寸为 0 - 媒体查询里换图时，
background-size值也要同步改，比如从12px 12px切到24px 24px对应 2x 图的逻辑尺寸 - 慎用
transform: scale()调整伪元素大小——它会二次缩放背景图，加剧模糊
真正麻烦的不是怎么写 image-set()，而是你得同时盯着三件事：图源是否真实高清、浏览器是否识别该语法、fallback 是否真的生效。漏掉任意一环，用户看到的还是那层挥之不去的灰蒙蒙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
