background-image 无法直接过渡，需用双层 opacity 切换实现淡入淡出；注意 stacking context、gpu 加速、transitionend 过滤及 prefers-reduced-motion 降级。
background-image 切换时为什么看不到淡入效果
因为 background-image 本身不触发 CSS 过渡动画，直接改值会导致瞬间切换，浏览器不会自动补帧。想实现淡入淡出，必须绕过这个限制——用两个叠层的 <div> 分别承载新旧背景，靠 <code>opacity 控制显隐。
常见错误现象：transition: background-image 0.3s 完全无效；改了 background-image 后画面“啪”一下就换了，没过渡。
- 必须把背景图从 CSS 属性移到 DOM 元素上（比如用
<div class="bg-layer">） <li>两个层都设 <code>position: absolute; top: 0; left: 0; width: 100%; height: 100%;，并共用同一个父容器 - 旧层初始
opacity: 1，新层初始opacity: 0；切换时旧层opacity: 0，新层opacity: 1 - 两层都要加
transition: opacity 0.4s ease-in-out，且不能只加在其中一个上 - 避免给背景父容器设
opacity 、<code>transform、filter等会创建新 stacking context 的属性 - 背景两层的
z-index建议显式设为0和1，不要依赖默认值 - 内容区域（比如
<main></main>）的z-index至少设为2，且其父容器不能是背景层的父级 - 检查 Chrome DevTools 的 Layers 面板，确认背景两层确实在同一合成层中切换
- 给两个背景层都加
will-change: opacity（仅在切换前临时加，切完可移除） - 更稳妥的做法是加
transform: translateZ(0)或backface-visibility: hidden强制 GPU 加速 - 切换逻辑用
requestAnimationFrame包一层，确保在下一帧执行，避免布局抖动 - 不要在
scroll事件里直接改opacity，先节流，再批量更新状态 - 监听
transitionend时一定要判断event.propertyName === 'opacity' - 移除节点前加个
setTimeout(() => node.remove(), 10)，比纯靠事件更稳 - 如果用框架，优先用条件渲染（如 Vue 的
v-if、React 的{showNewBg && <bglayer></bglayer>}），而不是手动 DOM 操作 - 旧层移除后，记得把新层的
z-index改回0，避免后续叠加层数失控
z-index 和 stacking context 怎么不出错
层级混乱是淡入淡出卡顿、闪屏或内容被盖住的主因。关键不是 z-index 数值大小，而是是否在同一 stacking context 里创建了预期的上下关系。
使用场景：背景层要始终在最底层，但页面其他内容（按钮、文字）又得盖在上面——这就要求背景层和内容层不能意外形成隔离的 stacking context。
立即学习“前端免费学习笔记（深入）”；
用 JavaScript 切换背景时怎么避免重排（reflow）
每次切换都重新写 style.backgroundImage 或频繁操作 className 可能触发同步 layout，尤其在滚动中调用时会卡顿。
性能影响：哪怕只是改 opacity，如果元素没有被提升为合成层（compositing layer），浏览器仍可能走 CPU 渲染路径。
淡出结束时怎么安全移除旧背景 DOM 节点
旧背景层 opacity 到 0 后立刻 remove()，可能导致视觉残留（尤其是低帧率设备），或者被 React/Vue 等框架误判为节点异常销毁。
容易踩的坑：监听 transitionend 时没过滤 propertyName，结果 opacity 和别的过渡同时触发多次回调；或者没清掉事件监听器导致内存泄漏。
真正难的不是让两张图淡入淡出，而是确保它们在各种缩放、滚动、系统偏好（比如减少动画）下都不破相——尤其是 prefers-reduced-motion: reduce 开启时，得主动降级为立即切换，否则用户会觉得页面“卡住”。
