background-image 不支持 css transition，需用 opacity 切换图层或 background-color 渐变实现过渡；推荐两层元素法：新图层先透明铺好再渐显，同步设置 background-size 等属性，注意路径、css 覆盖及加载校验。
background-image 本身不支持 CSS transition
直接写 transition: background-image 0.3s 完全无效 —— 浏览器根本不把它当作可动画属性。这是最常踩的坑，很多人调半天发现没过渡效果，其实是根本走不通这条路。
真正能触发平滑视觉变化的只有两类方案：叠加图层用 opacity 切换，或用 background-color 配合渐变缓和突兀感。前者更可靠，后者只适合背景色+图共同变化的场景。
用两层元素 + opacity 实现淡入淡出
核心思路是让新图在旧图上方先透明铺好，再同时控制两层 opacity，避免空白帧或闪烁。
- HTML 中给容器加一个固定定位的遮罩层：
<div id="bg-overlay" style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:-1;opacity:0;transition:opacity 0.4s ease"></div> - JS 切换时分两步：
document.getElementById('bg-overlay').style.backgroundImage = `url("${newSrc}")`，然后setTimeout(() => overlay.style.opacity = "1", 10) - 旧图保留在
body或父容器上，切换完成后可选是否清除（比如设body.style.backgroundImage = "none"） - 注意 z-index 和 position 必须确保遮罩层覆盖全屏且不挡交互元素
background-size、background-position 等必须同步设置
只改 background-image 不碰其他 background 属性，大概率导致新图拉伸、偏移或重复 —— 因为浏览器会沿用之前样式或默认值。
推荐一次性写全关键属性：
element.style.cssText = "background-image: url('new.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;"
或者用 style.setProperty() 分别设（兼容性更好）：
el.style.setProperty('background-image', "url('new.jpg')")el.style.setProperty('background-size', 'cover')el.style.setProperty('background-position', 'center')el.style.setProperty('background-repeat', 'no-repeat')
路径错误和 CSS 覆盖是静默失败主因
图片不显示却没报错？八成是这两类问题：
- 路径不对：
url('./imgs/bg2.jpg')中的./是相对于 HTML 文件位置，不是 JS 文件；用绝对路径如/assets/bg.jpg更稳 - CSS 强制覆盖：外部样式表里写了
body { background-image: none !important; }，内联样式就失效；检查 Elements 面板的 Computed Styles 确认最终生效值 - 图片加载失败：浏览器控制台出现 404，说明路径或服务器权限有问题；可先用
fetch(newSrc).then(...)预检
真正麻烦的是 opacity 过渡时机和 DOM 渲染顺序的微小错位 —— 10ms 的 setTimeout 不是玄学，是绕过浏览器渲染队列的必要妥协。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
