CSS background-image 无法直接过渡，需用 opacity 叠加伪元素、background-position 雪碧图或 CSS 变量+JS 控制，并配合图片预加载与占位色防白屏。
CSS 本身不支持 background-image 的直接过渡动画，所以直接写 transition: background-image 0.3s ease 是无效的——浏览器无法插值两张图片之间的变化，导致切换“跳变”，毫无过渡感。
用 opacity 叠加两张背景图实现淡入淡出
核心思路：让新旧背景图同时存在，通过控制其中一张的透明度来模拟切换。适用于已知固定切换顺序（如 hover / class 切换）的场景。
- 给元素设置两个伪元素
::before和::after，分别承载旧图和新图 - 初始时，
::before不透明，::after完全透明且z-index更高 - 触发状态（如
.hovered）后，给::after加opacity: 1，并用transition: opacity - 为避免闪烁，两个伪元素都设
background-size: cover; background-position: center保持一致
用 background-position 模拟“切换”（适合雪碧图或渐进式加载）
如果多张图可以拼成一张雪碧图（sprite），就能靠移动背景位置来“切换”，而 background-position 是可过渡的属性。
- 把所有背景图横向/纵向拼接成单张大图
- 容器宽高固定，
background-size设为整张雪碧图尺寸，background-repeat: no-repeat - 每种状态对应一个
background-position值（如0 0、-100px 0、-200px 0） - 添加
transition: background-position 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)实现缓动滑动效果
用 JavaScript 配合 CSS 自定义属性（推荐现代方案）
更灵活、可控性强，适合动态切换或响应数据变化的场景。本质是用 JS 控制 CSS 变量，再让变量驱动 opacity 或 transform 过渡。
立即学习“前端免费学习笔记（深入）”；
- HTML 中保留一个空容器，不写 background-image；JS 动态插入两张
img元素或用div+background-image - CSS 中定义：
--bg-opacity: 0;，并用background-image: url(...); opacity: var(--bg-opacity); - 切换时，先将新图 opacity 设为 0，再用
element.style.setProperty('--bg-opacity', '1')触发过渡 - 或更稳妥：用
transform: translateZ(0)强制硬件加速，避免 opacity 闪屏
补充：preload 图片 + fade class 防止白屏
无论哪种方式，图片未加载完成就触发过渡，会先显示空白再突然出现。必须预加载。
- 页面加载时用
new Image().src = 'url.jpg'或link rel="preload"提前拉取关键背景图 - 只在图片加载完成后才添加切换 class（监听
img.onload或用CSS.supports('font-display', 'swap')类似逻辑判断资源就绪） - 给容器设默认背景色（如
background-color: #f0f0f0），作为加载占位，提升感知流畅度
