必须按顺序并列写background-image: -webkit-image-set(...)和background-image: image-set(...)，且前置url()兜底；firefox完全不支持，chrome≥121/safari≥16.4才原生支持，旧版仅认-webkit-前缀。
image-set 函数在 CSS 中怎么写才生效
直接写 background-image: image-set(...) 很可能没效果——浏览器不支持、语法错位、或被其他背景声明覆盖。它必须用在支持该函数的浏览器里（Chrome 21+/Safari 6.1+/Edge 17+，Firefox 仅支持 url() 形式且需开启实验标志），且不能和 background-image: url(...) 混用在同一声明中，否则高 DPR 图片会被忽略。
正确写法是单独一行，显式指定每个候选图的分辨率描述符：
background-image: image-set( url(icon-1x.png) 1x, url(icon-2x.png) 2x, url(icon-3x.png) 3x );
-
1x对应设备像素比为 1 的屏幕（如普通笔记本）；2x对应 DPR=2（如 Retina Mac、多数安卓旗舰） - 路径必须真实存在，且服务器要正确返回
Content-Type: image/png，否则 Safari 会静默降级到1x - 不要写成
url("icon-2x.png") 2x,带引号在部分旧版 Safari 下会解析失败
为什么 background-image 用 image-set 后图片不切换
最常见原因是 CSS 层叠覆盖或回退机制失效。浏览器看到 image-set 但无法加载任一资源时，会尝试使用前一个有效的 background-image 声明（如果有），而不是报错或留白。
- 确保没有上层规则写了
background-image: url(fallback.jpg);—— 它会完全屏蔽image-set的解析 - DPR 变化不会触发重绘：比如从 DPR=2 切换到 DPR=3（插拔外接屏），已渲染的元素不会自动换图；只有新渲染或强制重排才会重新取值
- DevTools 的 “Rendering” 面板里勾选 “Emulate high DPR” 可验证是否命中对应资源，但注意 Network 面板未必显示所有候选图请求——浏览器只 fetch 当前 DPR 匹配的那个
image-set 和 srcset、picture 的本质区别在哪
image-set 是纯 CSS 能力，只控制 background-image，不参与 HTML 渲染流；而 srcset 和 <picture></picture> 是 HTML 层资源选择，影响 DOM 结构、语义、可访问性及加载时机。
-
image-set不改变元素尺寸，也不触发图像加载优先级提升（它和普通 background 一样是低优先级） - 无法设置
alt或响应loading="lazy"，对 SEO 和无障碍无贡献 - 不支持艺术方向（art direction），即不能根据视口宽度切换完全不同的构图图，只能按 DPR 切换同一张图的不同分辨率版本
- 服务端无法基于
image-set做 UA/DPR 路由，因为它是纯客户端解析
兼容性 fallback 怎么写才不踩坑
不能依赖 @supports (background-image: image-set(...)) 做检测——这个语法本身会报错。正确方式是用 @supports 检测函数存在性，且必须写完整调用形式：
@supports (background-image: image-set(url(a) 1x)) {
.icon {
background-image: image-set(
url(icon-1x.png) 1x,
url(icon-2x.png) 2x
);
}
}
.icon {
/* 所有浏览器都生效的兜底 */
background-image: url(icon-1x.png);
}
- 兜底规则必须放在
@supports块之后，否则会被覆盖 - 不要用
@supports not (...)写降级逻辑，容易因语法错误导致整段失效 - 若项目需支持 IE 或老 Android Browser，必须放弃
image-set，改用媒体查询 +min-resolution（注意单位：Firefox 用dppx，Chrome/Safari 用dpi或x）
实际项目里，image-set 最适合图标类小图，大背景图建议仍用 JavaScript 动态 setStyle 或服务端下发 DPR 参数——毕竟 CSS 无法读取 window.devicePixelRatio。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
