如何用CSS实现图片循环交叉淡入淡出且避免出现“渐变为黑色”的问题

嘿，我来帮你搞定这个图片交叉淡入淡出的问题！你遇到的后续循环出现黑底的情况，主要是因为当前的动画关键帧设置、层级控制和循环衔接的时机没配合好，咱们一步步调整，让过渡全程丝滑：

问题根源分析 #

你当前的代码有两个核心问题：

1. 第一张图（nth-of-type(1)）设置了position:relative，导致它的层级比其他绝对定位的图片高，动画循环时它的透明度变化会强制覆盖正在显示的其他图，造成显示异常。
2. 原关键帧在周期末尾（90%-100%）让图片透明度从0跳回1，循环衔接时和其他图片的显示时段冲突，露出了容器的黑色背景。

修复后的完整代码 #

<p class="fader5">
  <img src="https://live.staticflickr.com/65535/54578463678_c27eb53860_n.jpg" />
  <img src="https://live.staticflickr.com/65535/54578567065_025ae037e7_n.jpg" />
  <img src="https://live.staticflickr.com/65535/54578417269_740e2f5846_n.jpg" />
  <img src="https://live.staticflickr.com/65535/54578463698_eccddf3374_n.jpg" />
  <img src="https://live.staticflickr.com/65535/54577373532_f92b4ab806_n.jpg" />
</p>

.fader5 {
  position: relative;
  background: black;
  /* 给容器设置固定宽高，避免内部绝对定位元素导致容器塌陷 */
  width: 320px;
  height: 240px;
  overflow: hidden;
}

.fader5 img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，填充容器 */
  animation: fader5fade 10s infinite ease-in-out;
}

/* 重新设计关键帧，实现无缝交叉淡入淡出 */
@keyframes fader5fade {
  /* 等待阶段：保持透明 */
  0%, 16% {
    opacity: 0;
  }
  /* 淡入阶段：和前一张图交叉过渡 */
  20% {
    opacity: 1;
  }
  /* 主显示阶段：完全不透明 */
  76% {
    opacity: 1;
  }
  /* 淡出阶段：和后一张图交叉过渡 */
  80%, 100% {
    opacity: 0;
  }
}

/* 每张图的延迟设置，确保过渡时机完美衔接 */
.fader5 img:nth-of-type(5) { animation-delay: 0s; }
.fader5 img:nth-of-type(4) { animation-delay: 2s; }
.fader5 img:nth-of-type(3) { animation-delay: 4s; }
.fader5 img:nth-of-type(2) { animation-delay: 6s; }
.fader5 img:nth-of-type(1) { animation-delay: 8s; }

关键调整说明 #

1. 层级修复：去掉了第一张图的position:relative，所有图片统一用绝对定位，层级由HTML顺序决定（后面的图片默认在上方），确保淡入的新图能自然覆盖旧图。
2. 关键帧优化：
   • 把动画周期分成「等待→淡入→显示→淡出」四个阶段，16%-20%的淡入和76%-80%的淡出时段，刚好和相邻图片的过渡阶段重叠，形成平滑的交叉效果。
   • 移除了周期末尾强制恢复透明度的设置，避免循环衔接时的冲突。
3. 容器优化：给容器设置宽高和overflow:hidden，避免图片溢出，同时解决绝对定位元素导致的容器塌陷问题。
4. 图片适配：添加object-fit:cover，保证图片在容器内保持比例，不会拉伸变形。

这样修改后，无论循环多少次，图片都会平滑地从一张过渡到下一张，再也不会出现黑底的情况啦！

内容来源于stack exchange