必须用媒体查询组合（min-width + min-resolution）分层控制背景图适配，而非仅靠background-size:cover或image-set()；@media规则需从细到粗排列，fallback用通用图；关键内容图应改用实现html级预加载与语义化。
直接用 background-image 加 background-size: cover 无法真正适配不同分辨率——它只缩放同一张图，高 DPR 设备会模糊，小屏加载大图又浪费带宽。必须分层控制：按视口宽度选尺寸、按设备像素比选清晰度、按浏览器能力兜底。
用 @media 按 min-width 和 min-resolution 组合切换背景图
单靠宽度或单靠 DPR 都不够。iPad Air（DPR=2，宽 820px）和 MacBook（DPR=2，宽 1440px）需要不同物理尺寸的图，但 image-set() 给的永远是同一组倍率图。真正可控的是媒体查询组合：
-
@media (min-width: 768px) and (min-resolution: 2dppx)匹配「平板以上 + 高清屏」，加载bg-tablet@2x.jpg -
@media (min-width: 1024px) and (min-resolution: 1dppx)匹配「桌面标准屏」，加载bg-desktop@1x.jpg - 默认声明写最通用的图（如
bg-mobile@1x.jpg），作为所有未匹配场景的 fallback - 注意顺序：从细到粗排列，避免高优先级规则被低优先级覆盖；
min-resolution在 Firefox/Chrome/Safari 均支持，无需前缀
image-set() 在 Safari/Chrome 中生效，但在 Firefox 里整条声明被静默丢弃
Firefox（截至 v128）不解析 image-set()，不是降级，是跳过整行。DevTools 里该行被划掉，Console 无报错，图就没了。必须用多条独立 background-image 声明叠加：
- 第一行写
background-image: url("logo@1x.png")—— 所有浏览器都认 - 第二行写
background-image: -webkit-image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x)—— Safari ≥14 / Chrome 必须前置 - 第三行写
background-image: image-set(url("logo@1x.png") 1x, url("logo@2x.png") 2x)—— 现代 Chrome/Safari 用，但 Firefox 直接跳过 -
1x项不可省略，旧版 Safari 遇到缺失1x会丢弃整条-webkit-image-set() - 所有路径必须加引号：
url("bg@2x.jpg")，不能写成url(bg@2x.jpg)
background-size 不解决分辨率适配，只控制缩放行为
background-size: cover 或 contain 只决定这张图怎么填满容器，不决定该加载哪张图。常见误解是“设了 cover 就自动高清”，其实它对模糊问题毫无帮助——浏览器仍只下载你写的那一张图。
- 如果设计要求容器宽高为
100px × 50px，那么@2x图必须是200px × 100px物理尺寸，否则cover会强制拉伸导致模糊 -
background-size: 100% 100%会拉伸变形；auto可能留白；cover保证填满但可能裁剪；选哪个取决于设计约束 - 不要在构建工具里用
@/assets别名——image-set()和url()都不走 Webpack/Vite 解析，路径必须是运行时真实可访问的相对或绝对路径
真正语义化或 SEO 敏感的背景图，别用 CSS 背景，改用 <picture></picture>
banner、hero 图这类有内容意义的图，硬塞进 background-image 会丢失 alt、无法被爬虫索引、不能被屏幕阅读器识别。此时应放弃 CSS 背景方案，改用 HTML 层的 <picture></picture>：
-
<picture></picture>支持srcset+sizes，浏览器可在 HTML 解析阶段预加载最匹配的图 - 配合
<source media="(min-width: 768px)" srcset="..."></source>和<source media="(min-resolution: 2dppx)" srcset="..."></source>，实现宽度 + DPR 双重匹配 - fallback 用
<img src="...">，确保所有浏览器至少看到一张图 - 用
position: absolute+z-index叠在内容层下方，视觉效果等同背景，但语义正确
最易被忽略的点：image-set() 不触发预加载，@media 查询依赖 CSS 解析完成才生效，而 <picture></picture> 的 srcset 是 HTML 解析阶段就发起请求——首屏性能差一截。如果图是装饰性的，用媒体查询够用；如果是关键内容，别省这一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
