直接改 background-image 不会触发 CSS 过渡，应使用 opacity + 伪元素模拟淡入淡出：通过 ::before 叠加背景层并控制其透明度，配合 CSS 变量切换图片，多图轮播时保留双图层交错切换以避免闪屏。
直接改 background-image 不会触发 CSS 过渡，浏览器不支持对 background-image 做插值动画，所以切换时必然突变。解决办法不是硬刚这个属性，而是绕开它——用 opacity + transition 模拟淡入淡出效果。
用伪元素叠加图层实现淡入淡出
核心思路：把背景图放在一个独立的、可控制透明度的层上（比如 ::before 或 ::after），原容器保持固定结构，只动它的透明度。
.bg-container {
position: relative;
width: 100%;
height: 100vh;
}
.bg-container::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 0.6s ease-in-out;
z-index: -1;
}
.bg-container.show-bg::before {
opacity: 1;
}JS 切换时，先加新图、再加类触发淡入，旧图可保留在 DOM 中（或用 JS 清理）：
const container = document.querySelector('.bg-container');
const newImgUrl = '/images/bg2.jpg';
container.style.setProperty('--bg-url', `url(${newImgUrl})`);
container.classList.remove('show-bg');
// 强制重排，确保 opacity 从 0 开始
void container.offsetWidth;
container.classList.add('show-bg');配合 CSS 变量让写法更干净：
立即学习“前端免费学习笔记（深入）”；
.bg-container::before {
background-image: var(--bg-url, url(/images/bg1.jpg));
}多图轮播时避免闪屏
如果做自动轮播，建议至少维持两张图层（当前 + 下一张），用 opacity 交错控制，而不是删掉再建：
- 图层 A：
opacity: 1（当前显示） - 图层 B：
opacity: 0→ 切换时设为1，A 同步设为0 - 两者都保留在 DOM 中，仅靠透明度切换，无空白帧
可用两个伪元素（ 基本上就这些。::before 和 ::after），或两个子 ，结构更可控。注意兼容性和性能细节
opacity 是 GPU 加速属性，流畅且不触发重排 background-image 本身加 transition: all，无效还可能拖慢渲染 prefers-reduced-motion，可加媒体查询降级：@media (prefers-reduced-motion: reduce) {
.bg-container::before { transition: none; }
}
