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