CSS如何实现全屏背景图淡入切换_利用animation控制z-index与opacity-css教程-PHP中文网

直接用 opacity 动画切换背景图会闪屏，因 background-image 不支持透明度动画，单容器切换时新图未加载完即触发 opacity 变化，导致空白或残留；须用双层绝对定位容器预加载图片，通过 opacity 关键帧与 z-index 类控制实现平滑淡入淡出。

css如何实现全屏背景图淡入切换_利用animation控制z-index与opacity

为什么直接用 `opacity` 动画切换背景图会闪屏

因为 CSS 背景图本身不支持 opacity 动画，你只能对容器元素做透明度变化。但若只用单个 <div> 切换 <code>background-image 并加 opacity 动画，浏览器会在新图加载完成前显示空白或旧图残留，造成视觉跳变。

真正可行的方案是：用两个叠层容器，通过 z-index 控制显隐顺序，各自独立控制 opacity，让一张淡出、另一张淡入——前提是两张图都已加载完毕。

必须预加载下一张图（否则淡入时触发加载，必然卡顿或留白）
z-index 不能靠动画控制（CSS 不支持 z-index 过渡），得靠 @keyframes 配合 opacity 触发层叠切换
两层需使用 position: absolute 且尺寸完全一致，否则错位

用 `@keyframes` 同时驱动 `opacity` 和 `z-index` 的写法

注意：z-index 本身不可动画，但可以放在关键帧里“突变”。只要时机和层级逻辑对得上，人眼感知就是平滑切换。

@keyframes fadeSwitch {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
<p>/<em> 主动层（当前显示） </em>/
.layer-active {
animation: fadeSwitch 4s forwards;
z-index: 2;
}</p><p>/<em> 待命层（下一张） </em>/
.layer-next {
opacity: 0;
z-index: 1;
animation: fadeSwitch 4s 0.1s forwards reverse;
}
</p>

reverse 让待命层从 opacity: 0 开始、到 opacity: 1 结束
0.1s 延迟确保两层动画不完全同步，避免中间出现双 opacity: 0
z-index 不写进动画，而用 class 控制初始值，靠动画结束后的 class 切换来更新层级

如何用 JS 安全切换并预加载下一张图

手动改 class 不够，关键是保证 layer-next 的 background-image 已加载完成再启动动画，否则淡入时仍是空白。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

推荐用 new Image() 预加载 + onload 回调：

function preloadImage(src) {
  return new Promise(resolve => {
    const img = new Image();
    img.onload = () => resolve();
    img.src = src;
  });
}
<p>async function switchBackground(nextUrl) {
const nextLayer = document.querySelector('.layer-next');
nextLayer.style.backgroundImage = <code>url(${nextUrl})</code>;</p><p>await preloadImage(nextUrl); // 等加载完再动
document.querySelector('.layer-active').classList.remove('layer-active');
nextLayer.classList.add('layer-active');
nextLayer.classList.remove('layer-next');
document.querySelector('.layer-active').classList.add('layer-next');
}
</p>