image-set() 必须配合 url() 和 1x/2x 等分辨率描述符使用，仅适用于 background-image；漏写描述符、用于 <img> 或无 fallback 会导致失效，且 Firefox 完全不支持。
image-set() 在 CSS 中怎么写才生效
直接用 image-set() 替换 background-image 的值，但必须配合 url() 和分辨率描述符，否则浏览器会忽略整个声明。它不支持单独作为属性值，也不能用在 <img> 的 src 上——只适用于 CSS 背景图。
常见错误是漏写描述符，比如写成 background-image: image-set("a.jpg", "b@2x.jpg");，这完全无效。正确写法必须带 1x、2x 这类标识：
background-image: image-set(
url("logo-1x.png") 1x,
url("logo-2x.png") 2x,
url("logo-3x.png") 3x
);Chrome 和 Safari 对 image-set() 的支持差异
image-set() 在 Chrome 89+ 和 Safari 15.4+ 才真正稳定可用，旧版 Safari（尤其是 iOS 15.2 及更早）会静默降级为 fallback 值（比如上一条规则里的 background-image）。Firefox 目前完全不支持，会直接跳过该声明。
所以实际使用时必须提供降级方案：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
/* fallback */
background-image: url("logo-1x.png");
/* 支持的浏览器覆盖 */
@supports (background-image: image-set(url(a) 1x)) {
background-image: image-set(
url("logo-1x.png") 1x,
url("logo-2x.png") 2x
);
}- 不要依赖
@supports检测image-set()是否存在就认为“可用”——Safari 15.0–15.3 虽然返回 true，但实际不加载 2x 图 - 建议把
@supports块放在 fallback 声明之后，避免被覆盖 - 如果项目需兼容 Firefox 或老 Edge，
image-set()就不能作为核心方案
和 srcset / picture 相比，image-set() 的适用边界在哪
image-set() 只解决「CSS 背景图按 dpr 切换」这一个场景，不涉及宽高变化、艺术指导（art direction）、格式切换（如 webp → jpg），也不响应视口宽度。它和 <img srcset> 是平行关系，不是替代关系。
典型适合用 image-set() 的地方：
- 固定尺寸的图标背景（如按钮上的小 icon）
- 不需要响应式缩放的装饰性背景图
- 通过 JS 动态设置
style.backgroundImage且只关心 dpr
不适合的地方：
- 轮播图 banner —— 宽度随屏幕变，得用
<picture> - 需要根据网络条件降级（如 2G 下强制 1x）——
image-set()不读取Connection头 - 要支持 AVIF/WebP 回退 —— 它不处理 MIME 类型协商
实际部署时容易被忽略的细节
最常踩的坑不是语法，而是资源路径和缓存行为：
-
image-set()中每个url()是独立请求，浏览器不会复用已加载的同名文件——即使logo-1x.png和logo-2x.png内容一致，也会发两次请求 - 所有图片必须同源或配好 CORS，否则在
canvas中使用背景图时可能触发安全异常 - 构建工具（如 Webpack/Vite）默认不识别
image-set()里的url()，需额外配置 loader 解析，否则打包后路径出错 - 没有 loading 状态反馈——浏览器选哪个图、何时加载、是否失败，开发者无法监听
如果你发现高分屏没加载 2x 图，先检查 DevTools 的 Network 面板里是否发出了对应请求，而不是只看 computed styles。
