background-image 本身不支持过渡，因浏览器无法对不同 url() 值插值；需用双层元素叠加+opacity过渡模拟切换，并预加载图片、合理使用 will-change 或 transform 加速。
background-image 切换时为什么没有过渡效果
CSS 的 background-image 本身不支持过渡动画，哪怕你写了 transition: background-image 0.5s，浏览器也会直接跳变——这是最常被卡住的第一步。
根本原因是：图片资源加载、解码、渲染是离散过程，CSS 过渡引擎无法对两个不同 url() 值做插值计算。
- 别试图给
background-image加transition，它无效 - 真正能过渡的只有可插值的属性，比如
opacity、transform、filter - 想“切换背景图”，得用两层元素叠加 + 控制透明度来模拟
用 opacity + position 实现双图叠层平滑切换
核心思路是固定两个 div 占位，共用同一尺寸和定位，只让其中一层渐隐、另一层渐显。
关键点不在“怎么写 CSS”，而在于 DOM 结构是否可控、是否允许 JS 触发状态变更：
立即学习“前端免费学习笔记（深入）”；
- 父容器设为
position: relative，两个背景层设为position: absolute; top: 0; left: 0; width: 100%; height: 100% - 初始时，前层
opacity: 1，后层opacity: 0；切换时互换 opacity 值（用 class 控制更稳） - 必须加
transition: opacity 0.6s ease-in-out到两层元素上，不能只加在某一层 - 避免用
display: none或visibility: hidden，它们会中断过渡流程
示例片段：
.bg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.6s ease-in-out; }
.bg-layer.active { opacity: 1; }
.bg-layer.inactive { opacity: 0; }
preload 图片防止切换时闪白或延迟
用户点击切换时如果图片还没加载完，就会先看到空白或 fallback 色块——这不是过渡问题，是资源加载问题。
- 用
<link rel="preload">提前加载所有背景图，特别是移动端弱网下特别明显 - JS 中切换前检查
img.complete或用new Image().onload做兜底判断 - 不要依赖 CSS
background-image的加载时机，它不可控、无回调 - 若图数量多，考虑用雪碧图或 WebP +
image-set()减少请求数，但注意 Safari 对image-set()的兼容性仍有限
用 will-change 提升 opacity 动画帧率（但别滥用）
当背景图区域较大（如全屏），频繁 opacity 变化可能触发重绘瓶颈，尤其在低端 Android 设备上掉帧明显。
- 仅对正在过渡的层加
will-change: opacity，切完立刻移除（否则持续占用 GPU 内存） - 不要对所有
.bg-layer预设will-change，这反而拖慢初始渲染 - 替代方案：用
transform: translateZ(0)强制硬件加速更轻量，但效果略弱于will-change - Chrome DevTools 的 Rendering 面板里打开 “Paint flashing” 和 “FPS meter”，能直观看出是否真有优化收益
