image-set() 不能实现真正响应式背景图，仅按dpr选图；常见失效原因包括firefox不支持、漏写描述符、路径错误、未提供fallback链及容器样式不匹配。
image-set() 不能实现真正意义上的“响应式背景图”，它只按设备像素比（DPR）选图，和屏幕宽度无关；用错场景或忽略 fallback 会导致高分屏依然模糊，甚至在 Firefox 中完全不显示。
为什么 background-image: image-set() 写了却没效果
最常见原因不是语法错误，而是浏览器根本没解析这条声明：
- Firefox v128（2026年6月）仍完全不支持
image-set()，会直接跳过整行，背景图消失 - 漏写分辨率描述符（如
1x、2x），或把url()写成裸字符串（如"logo.png"），Chrome/Safari 也会静默忽略整条background-image声明 -
1x项缺失时，旧版 Safari（≤15.3）会丢弃整个函数，不降级也不报错 - 构建工具（Vite/Webpack）不会处理
image-set()中的路径，若logo-2x.png没进dist目录，运行时就是 404，高分屏 fallback 到 1x 图后仍模糊
正确的写法必须包含三行 fallback 链
现代项目中不能只写一行 image-set()，必须按顺序写三行，且路径、引号、空格、单位必须完全一致：
background-image: url("logo-1x.png");
background-image: -webkit-image-set(url("logo-1x.png") 1x, url("logo-2x.png") 2x);
background-image: image-set(url("logo-1x.png") 1x, url("logo-2x.png") 2x);
-
-webkit-image-set()必须在image-set()之前，否则 Safari 16.4+ 可能漏掉1x项 - 所有
url()必须加引号，路径含@或空格时尤其容易出错（如url("icon@2x.png")） - 描述符后的
x是必需字符，不能写成dppx或省略 - 不能把
image-set()和其他值拼接，例如background-image: url(fallback.jpg), image-set(...)是非法的
即使加载了 2x 图，仍可能模糊的渲染陷阱
高清图加载成功 ≠ 渲染清晰，以下情况会让 image-set() 白忙一场：
- 容器没有显式宽高，或
background-size缺失/设为auto：2x 图被 CSS 拉伸或压缩，像素不对齐 -
background-size没按设计稿逻辑尺寸设（如图标本应显示为24px × 24px，但 2x 图物理尺寸不是48px × 48px） - 父元素使用了
transform: scale()或zoom，破坏像素对齐 - DPR 变化（如 MacBook 插拔外接显示器）不会触发重绘，已渲染的元素不会自动换图
别把它当 srcset 用，更别指望它响应视口宽度
image-set() 的判断依据只有 DPR，和 min-width、sizes、media 完全无关：
- iPad Pro（DPR=2）永远走
2x，哪怕你只想要一张 400w 的小图；1080p Windows 笔记本（DPR=1）永远走1x，哪怕屏幕很宽 - 不能嵌套媒体查询，也不能在
@media块里再写image-set() - 如果目标是「小屏加载小图、大屏加载大图」，必须用媒体查询 + 多个
background-image规则覆盖，或改用<img srcset> -
image-set()不参与 HTML 渲染流，无语义、不可访问、不 SEO，仅适合图标、按钮等小尺寸、固定构图的背景图
真正容易被忽略的一点：你写的每一条 image-set() 都依赖构建产物路径真实存在、服务器返回正确 Content-Type、容器样式严格匹配物理尺寸——缺一不可，否则 DPR 再高也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
