background-image 多图用逗号分隔实现叠加层，首图在最上、末图在最底，所有图均立即加载；真正懒加载需JS动态设置CSS变量或内联样式，初始不设background-image是关键前提。
background-image 多图写法：逗号分隔但有顺序陷阱
CSS 的 background-image 确实支持一次性写多张图，用逗号分隔就行，比如：background-image: url(a.jpg), url(b.jpg), url(c.jpg);。但它不是“并行加载”或“按需切换”，而是叠加层——第一张在最上，最后一张在最底，所有图都会被浏览器发起请求，不管是否可见、是否被遮挡。
常见错误是以为写了三张图，浏览器会“智能选一张”，结果首页白屏时间变长，Network 面板里看到三张大图全在 loading。
- 叠加层级生效的前提是
background-position、background-size、background-repeat也都用逗号对齐写，漏一个就会错位或失效 - 如果某张图加载失败（404），整条声明不会中断，但那一层显示为透明，可能意外暴露下层背景色或图
- 所有图都走主文档的 CSS 解析阶段，无法延迟到滚动进视口再加载
真正“按需加载”的解法：CSS 变量 + JavaScript 控制
想让某张大图只在特定条件（比如用户点开详情页、进入某个 tab）时才加载，必须把 background-image 从静态样式里抽出来，改用 JS 动态设置 CSS 变量或内联样式。
例如，给容器加个 data-bg-key="hero-banner"，JS 根据 key 查表拿到对应图片 URL，再设置：el.style.backgroundImage = `url(${url})`;。这样图片请求只发生在赋值那一刻，且可配合 IntersectionObserver 或点击事件触发。
立即学习“前端免费学习笔记（深入）”；
- 避免直接操作
style.backgroundImage后覆盖其他 background 属性（如 repeat、size），推荐统一用 CSS 变量 +background-image: var(--bg-img) - 图片 URL 最好带版本参数或哈希（如
banner-v2.3.jpg?ts=171...），防止缓存导致换图不生效 - 服务端若支持 Client Hints（如
Sec-CH-DPR），可在 JS 中读取设备像素比，动态选 1x/2x 图，但注意兼容性（Safari 支持有限）
@import 和 link 加载外部 CSS 不解决图片懒加载
有人试图把不同背景图拆到多个 CSS 文件，再用 @import 或 <link rel="stylesheet"> 分开引入，以为能控制加载时机。其实不行——只要 CSS 文件被解析，里面所有 url() 都会立刻触发网络请求，和写在一个文件里没区别。
更糟的是，@import 在 CSS 内部使用会阻塞后续规则解析；而 <link> 虽然可加 media="print" 暂时不加载，但一旦 media 匹配（比如用户切到打印预览），所有图还是会批量请求。
-
<link rel="preload" as="image" href="a.jpg">只能提前加载，不能推迟加载 - 想真正延迟，唯一可靠路径是：初始不设 background-image，等 JS 明确需要时再注入
- 如果用 Webpack/Vite，
url()写在 CSS 里仍会被打包工具识别为资源依赖，提前处理，所以“分离 CSS 文件”对运行时懒加载无效
大图响应式 fallback：不要只靠 background-size cover
一张 3MB 的 4K 背景图，在低端机上 decode 时间可能超 500ms，造成卡顿。光靠 background-size: cover 不解决问题，它只是缩放，不减少数据量。
必须配合 srcset 思路的 CSS 替代方案：用 @media + picture 语义虽不在 CSS，但可用 background-image 配合媒体查询做类似事——前提是图名有规律（如 hero-400.jpg、hero-800.jpg）。
- 写法示例：
@media (max-width: 768px) { .hero { background-image: url(hero-400.jpg); } }，但注意：所有尺寸的图仍会在初始 CSS 解析时被请求，除非用 JS 切换 class - 更稳妥的是服务端根据 UA 或 DPR 返回不同 CSS，或前端 JS 读取
window.devicePixelRatio后拼 URL - WebP/AVIF 格式能显著减体积，但得加 JS 检测支持（
document.createElement('canvas').toDataURL('image/webp')），再决定加载哪套 URL
