image-set() 不能单独解决 Retina 屏模糊问题，因其仅按 DPR 选图、不响应视口宽度、无尺寸控制且 fallback 缺失会导致背景空白；Firefox 不支持，Safari 解析脆弱，路径需 url() 包裹并显式声明 background-size 才有效。
image-set() 不能单独解决 Retina 屏模糊问题，它只按 DPR 选图，不控制尺寸、不响应宽度、不处理 fallback 失败——用错就直接背景空白。
为什么写了 image-set() 还是糊？
根本原因不是语法写错了，而是你误把它当成了 srcset 的 CSS 版本。它只看 window.devicePixelRatio，不管视口宽窄：iPhone 14（390px 宽 / 3x）和 MacBook Pro（1792px 宽 / 2x）都可能加载同一张 @2x.jpg，但前者需要 780px 宽的图，后者需要 3584px 宽，结果必糊。
- DevTools → Rendering 面板勾选 “Device pixel ratio”，确认当前设备 DPR 值是否匹配你写的
1x/2x - 检查 Network 面板：实际请求的是
bg@2x.jpg还是bg.jpg？如果是后者，image-set()根本没生效 - 图片物理尺寸必须严格匹配 CSS 占位尺寸：若元素渲染后是
width: 375px; height: 200px;，那@2x图就得是750×400px，否则background-size: cover会二次拉伸
正确写法：url() 包裹 + 显式 fallback + background-size 同步
漏掉任意一项，轻则失效，重则背景消失（尤其 Firefox 完全不解析 image-set()，没 fallback 就白屏）。
- 路径必须用
url()包裹：image-set(url('bg-1x.jpg') 1x, url('bg-2x.jpg') 2x)✅；image-set('bg-1x.jpg' 1x)❌（Safari 可能报错） - 必须写 fallback：
background-image: url('bg-1x.jpg');放在前面，background-image: image-set(...)放后面，确保旧浏览器有图可显 -
background-size必须显式声明：比如设计稿是 375×200px，则写background-size: 375px 200px;或background-size: cover;，否则 @2x 图以双倍像素渲染，视觉放大两倍 - 分辨率描述符单位不能省：
2x✅，2或2xpx❌（整条规则静默丢弃）
兼容性陷阱：Firefox 不支持，Safari 解析脆弱
截至 2026 年 10 月，Firefox v128 仍完全忽略 image-set()；Safari 16.4+ 才稳定支持，且对空格、引号、404 路径零容忍——构建时 ~assets/ 别名不会被自动解析，CDN 缓存参数 ?v=xxx 手动拼进 image-set() 会导致解析失败。
立即学习“前端免费学习笔记（深入）”；
- Webpack/Vite 项目中，
image-set()内路径不走 asset 处理流程，建议改用require('./bg@2x.jpg')（需 loader 支持）或直接写相对路径 - 不要依赖 autoprefixer 自动加
-webkit-image-set()：现代 Chrome/Safari 已不需要前缀，但加了反而可能触发旧引擎 bug - 真要兼顾兼容性，优先用
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)+background-image+background-size组合，比image-set()更可控
什么时候该放弃 image-set()？
如果你的项目要支持 Firefox、需要适配不同屏幕宽度、或构建链路无法保证路径 100% 正确，就别用 image-set()。它看着一行搞定，实则调试成本高、失败无提示、fallback 容易漏——真正稳妥的方案仍是媒体查询分层控制，哪怕多写几行 CSS。
最常被忽略的一点：background-image 永远不响应 srcset 和 image-rendering，所以无论你怎么设 crisp-edges，只要图源错了，模糊就不可避免。
