全屏幻灯片切换时z-index对background-image无效，因其不参与层叠上下文；应改用绝对定位div+opacity过渡+transitionend监听，并用100dvh兼容iOS视口。
background-image 全屏幻灯片切换时 z-index 失效？
全屏背景图切换时元素被遮挡，不是 z-index 没生效，而是它根本没起作用的场景——background-image 是绘制在元素「内部」的，不占层叠上下文（stacking context），所以无论你给父容器设多高的 z-index，它都不会压住兄弟元素里的按钮、导航栏等真实 DOM 子节点。
真正要控制层级，得让每张背景图变成独立的、可定位的 <div>，再用 <code>position: absolute + z-index 管理顺序。
- 别把幻灯片逻辑写在
body或section的background-image上 - 每个背景图用一个
<div class="bg-slide">，设 <code>position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; - 切换时只改当前显示项的
z-index（比如设为1），其他统一设为0，避免堆叠溢出 - 给幻灯片容器加
transform: translateZ(0)或will-change: opacity - 但别滥用
will-change：只在切换前瞬间加，切完立刻移除，否则内存占用会上升 - 过渡时间别设太短（
），iOS Safari 对超快 opacity 动画支持不稳定 - 每次启动新轮播前，先
clearInterval(this.timer)（假设 timer 是实例变量） - 切换函数里别直接改
opacity，用getComputedStyle(el).opacity判断是否已到目标值，再进下一步 - 更稳的做法是监听
transitionend事件，而不是靠预估时间；但注意：该事件在opacity为 0 时可能不触发（浏览器优化跳过），所以建议监听所有可变属性：el.addEventListener('transitionend', handler, { once: true }) - 全屏高度优先用
min-height: 100dvh（dvh是动态视口单位，兼容 iOS 16+；老版本 fallback 到100vh并用 JS 修正） - 避免多层
opacity: 0.5叠加：比如两个 0.5 透明度图层叠一起，实际是 0.75 透光率，不是预期的“淡入淡出”效果；应始终只保留一张可见图 + 一张正在淡入/出的图 - 如果要用渐变过渡（如从图 A 淡出、图 B 淡入），别同时操作两张图的
opacity，改用mix-blend-mode: normal+ 分离的transition阶段控制
opacity 动画卡顿或闪一下？
直接对 opacity 做 CSS 过渡（transition: opacity 0.6s）在某些浏览器（尤其是旧版 Safari 和部分 Android WebView）上会触发重排（reflow），导致淡入淡出中间有 1 帧黑/白闪。这不是 bug，是渲染管线没走合成层（compositing layer）。
强制开启硬件加速能绕过这个问题：
立即学习“前端免费学习笔记（深入）”；
JavaScript 控制切换节奏时常见的 timing 错误
用 setInterval 轮播背景图，结果越跑越快，或者切换不同步——本质是没清理上一轮定时器，或没等上一次动画结束就触发下一次。
移动端全屏适配和透明度叠加的坑
在 iPhone 上，height: 100vh 会把地址栏高度算进去，导致背景图被截断；而用 opacity 叠加多个图层时，iOS WebKit 会对半透明区域做额外抗锯齿，造成边缘发虚或色偏。
dvh 兼容处理和 transitionend 的 once 选项——这两个点不补上，上线后第一波用户反馈基本就来自 iPhone。
