image-set() 是 css 原生响应 dpr 的背景图切换方案，支持 chrome 21+、safari 6.1+、firefox 32+，但 edge 12–18 和 ie 不支持，需用 url() fallback 并注意单位（1x）、引号、顺序及构建工具路径处理。
image-set() 语法和浏览器兼容性现状
image-set() 是 CSS 提供的原生方案，用于根据设备像素比（dpr）切换不同分辨率的背景图。但它不是所有浏览器都支持：Chrome 21+、Safari 6.1+、Firefox 32+ 支持，但 Edge 12–18 不支持，IE 完全不支持。如果你的项目需兼容旧版 Edge 或需要 fallback，必须搭配 background-image 的多声明写法——CSS 会忽略无法解析的值，自然降级。
正确写法：多倍图路径 + 像素比单位必须带 d
关键错误常出在单位漏写或写错：1x、2x 中的 x 是必需的，不能写成 1 或 2；路径要用引号包裹（尤其含空格或特殊字符时）；多个 image-set() 项用逗号分隔，且整个函数要放在 background-image 声明最前面，否则会被后续声明覆盖。
background-image: image-set("bg@1x.png" 1x, "bg@2x.png" 2x, "bg@3x.png" 3x);- 若同时写 fallback，顺序应为：
background-image: url("bg@1x.png"), image-set(...);（注意：实际中 fallback 应写在image-set()前，因为后者不被支持时整条声明失效） - 推荐写法（兼顾兼容与语义）：
background-image: url("bg@1x.png"); background-image: image-set("bg@1x.png" 1x, "bg@2x.png" 2x, "bg@3x.png" 3x);
与媒体查询方案对比：何时该用 image-set()
相比用 @media (-webkit-min-device-pixel-ratio: 2) 切换 background-image，image-set() 更轻量、无需重复写选择器，且由浏览器原生控制加载逻辑（可能跳过非匹配资源）。但它只响应像素比，不响应视口宽度或网络条件；而媒体查询可组合 min-width + resolution，适合需要“大屏 + 高清”双重判断的场景。另外，image-set() 中的图片不会预加载，首次渲染时仍可能有短暂模糊或闪烁——这点容易被忽略。
真实项目中要注意的三个细节
开发时容易掉坑的地方：
- Webpack/Vite 等工具默认不处理
image-set()内的路径，如果用了别名（如~assets/bg.png），构建后路径可能失效，建议用相对路径或显式配置 URL 处理规则 - 某些 CDN 会对 URL 自动加版本参数（如
?v=123），但image-set()中的 URL 若手动拼了参数，可能破坏缓存一致性；最好让构建工具统一处理哈希 - Safari 对
image-set()的解析较严格：若任意一项路径 404，整条声明可能被丢弃，导致背景空白——上线前务必验证所有倍图 HTTP 状态码
高清适配不是加个 2x 就完事，真正卡住的是路径管理、构建介入点和浏览器兜底策略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
