应避免使用 image-set() 做移动端背景图适配，因其在 Firefox、Safari、Chrome 等浏览器中存在解析失效、兜底不生效、构建工具不识别、X5/鸿蒙 WebView 不支持等多重兼容性问题。
别用 image-set() 做移动端背景图适配——它在真实环境里大概率失效，不是写法问题，是浏览器根本不解析。
为什么写了 image-set() 却没加载任何图
Firefox v128 会静默跳过整条 background-image: image-set(...) 声明，DevTools 里那行直接被划掉，Console 无报错，但背景就是空白；Safari ≤15.3 漏写 1x 描述符，整条函数被丢弃，连 fallback 都不走；Chrome/Safari 若路径没用 url() 包裹（比如写成 "bg@2x.png" 2x），或单位写成 2 而非 2x，同样整条忽略。
- 所有路径必须用
url("...")包裹，且引号统一（全单引号或全双引号） -
1x必须显式写出，不能省略，也不能写成1或1dppx - Vite/Webpack 等构建工具默认不扫描
image-set()内的字符串，bg@2x.png不会自动打进dist目录 → 运行时 404 - 安卓微信 X5 内核、鸿蒙 WebView 等定制环境完全不支持原生
image-set()，也不认-webkit-image-set()的相对路径
如果非要试，必须严格按三行顺序写
浏览器从上到下逐条尝试解析，遇到能识别的就停。缺一不可，顺序错不得：
background-image: url("bg@1x.png");
background-image: -webkit-image-set(url("bg@1x.png") 1x, url("bg@2x.png") 2x);
background-image: image-set(url("bg@1x.png") 1x, url("bg@2x.png") 2x);
- 第一行是兜底，所有浏览器都认；不能和后面拼在同一行，
background-image: url(), image-set()是非法语法 -
-webkit-image-set()必须在image-set()前面，否则 Safari ≥16.4 可能漏掉1x项 - 三行中路径、引号类型、空格、单位（
1x/2x）必须完全一致，差一个字符都可能让某浏览器失效
真正能落地的替代方案：媒体查询 + 多层 fallback
用 @media 切断点控制视口宽度，再在每个断点内单独写三行 fallback 链。这样既能响应 DPR，又能响应屏幕物理尺寸，避免 iPhone 竖屏和 MacBook 横屏加载同一张 @2x.png 导致拉伸模糊：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2),
(max-width: 480px) and (min-resolution: 192dpi) {
.hero {
background-image: url("bg-mobile-1x.jpg");
background-image: -webkit-image-set(url("bg-mobile-1x.jpg") 1x, url("bg-mobile-2x.jpg") 2x);
background-image: image-set(url("bg-mobile-1x.jpg") 1x, url("bg-mobile-2x.jpg") 2x);
}
}
- 不同断点用不同图名（如
bg-mobile-2x.jpg/bg-desktop-2x.jpg），避免缓存干扰和预加载浪费 - 小屏优先用
background-size: contain+background-position: center top，确保关键内容不被cover裁掉 - 必须配
background-repeat: no-repeat，否则占位图容易误判为“没生效”
最常被忽略的一点：即使你把 image-set() 写得完全正确，它也只看 DPR，不看视口宽、不看网络条件、不预加载——首次渲染仍可能闪一下或短暂模糊。这不是 bug，是它的设计限制。
