CSS全屏背景幻灯片切换_控制z-index与透明度的淡入淡出-css教程-PHP中文网

全屏幻灯片切换时z-index对background-image无效，因其不参与层叠上下文；应改用绝对定位div+opacity过渡+transitionend监听，并用100dvh兼容ios视口。

css全屏背景幻灯片切换_控制z-index与透明度的淡入淡出

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，避免堆叠溢出

opacity 动画卡顿或闪一下？

直接对 opacity 做 CSS 过渡（transition: opacity 0.6s）在某些浏览器（尤其是旧版 Safari 和部分 Android WebView）上会触发重排（reflow），导致淡入淡出中间有 1 帧黑/白闪。这不是 bug，是渲染管线没走合成层（compositing layer）。

强制开启硬件加速能绕过这个问题：

Hoppy Copy

AI邮件营销文案平台

下载

立即学习“前端免费学习笔记（深入）”；

给幻灯片容器加 transform: translateZ(0) 或 will-change: opacity
但别滥用 will-change：只在切换前瞬间加，切完立刻移除，否则内存占用会上升
过渡时间别设太短（），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