background-image在@media中无法真正按需加载，因浏览器解析CSS时会预加载所有url()；可靠方案是将各断点背景图拆至独立CSS文件，通过link[media]按需加载。
background-image 在响应式页面里根本不会“按需加载”——写进 CSS 的任何 url()，只要被浏览器解析到，就会立刻发起请求。所谓“用 @media 控制背景图只在某断点生效”，只是隐藏样式，不阻止下载。
为什么 @media 包裹 background-image 无效
Chrome DevTools 的 Network 面板能直接验证：哪怕你把 background-image: url("hero-1920.jpg"); 写在 @media (min-width: 1200px) { ... } 里，只要整个 CSS 文件被加载，这张图就大概率在首屏前就被取了。
- 浏览器解析 CSSOM 时会扫描所有
url()，不管它是否被媒体查询包裹 -
@media只影响样式计算和渲染输出，不影响资源获取生命周期 - 即使元素当前
display: none或不在视口内，图片仍会预加载 - 多个断点共用一个 CSS 文件时，小屏用户也会下载桌面端的背景图
真正能阻止非目标尺寸图片加载的方式
必须让图片 URL **只出现在当前设备匹配的 CSS 规则中**，且该规则不被提前解析。目前最可靠、零 JS、全浏览器兼容的做法是：
- 把不同尺寸的背景图声明拆到独立 CSS 文件中，例如：
mobile-bg.css、tablet-bg.css、desktop-bg.css - 在 HTML
中用等方式加载 - 确保每个文件只包含对应断点的
background-image声明，不混写其他尺寸的图 - 不要给这些
加preload或prefetch，否则会绕过 media 判断逻辑
注意：media 属性值必须是有效媒体查询（如 screen and (max-width: 767px)），漏掉 screen and 或拼错会导致样式完全不生效。
image-set() 和 @container 都不能解决预加载问题
image-set() 只支持根据设备像素比（DPR）切换，比如 @1x/@2x，但不响应视口宽度变化，且 Firefox 至今未支持；@container 查询只影响样式计算时机，对图片请求毫无控制力——容器尺寸由 JS 设置时，图片甚至可能在 JS 执行前就被发出了请求。
-
image-set()示例：background-image: image-set("hero-1x.jpg" 1x, "hero-2x.jpg" 2x); -
@container无法触发资源懒加载，仅用于布局适配 - 所有依赖 CSS 变量 + JS 动态赋值
background-image的方案，前提是初始 CSS 里不能出现任何url()，否则照样预加载
更优替代方案：改用 + srcset
如果背景图本质是内容型图片（比如 banner、产品主图），优先考虑 HTML 层响应式方案：srcset 和 sizes，浏览器能真正按视口宽度和 DPR 自主选择最小够用资源，并天然支持 loading="lazy"。
- 关键点：必须为每个
width和height（或aspect-ratio），防止布局偏移 -
sizes值要与media协同，否则浏览器可能忽略匹配 - 若需 CSS 背景图的定位/裁剪能力，可用
object-fit: cover+ 绝对定位模拟
复杂点在于：纯 CSS 方案做不到真·按需，而 HTML 方案需要调整 DOM 结构。最容易被忽略的是——很多人以为拆成多个 CSS 文件就够了，却忘了检查构建流程是否把所有断点图都打包进了 base.css，导致白忙一场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
