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