背景图像的淡入淡出效果 - 重叠问题答案

【问题标题】：Fade-transitioning effect for background images - overlapping issue背景图像的淡入淡出效果 - 重叠问题
【发布时间】：2020-04-22 00:31:17
【问题描述】：

目标

我想显示三张图片之间的褪色过渡（最好是 10 张，我在这个问题中使用了三张）。每个图像应逐渐增加其不透明度，直到完全不透明，然后下一张图片应开始相同的过程，即从不透明度 0 到 1。

问题

如果您查看 sn-p，您会发现只有第三张图像遵循此不透明过程，而前两张图像模糊显示，因为第一张图像与它们重叠。

感谢您的帮助！

尝试

.slider {
  margin: 0;
  padding: 0;
  }
  
  .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.slide-1 {
  background-image: url("https://images.immediate.co.uk/production/volatile/sites/23/2019/10/Federico_Veronesi_Lions-cover-image-e359a4e.jpg?quality=45&crop=10px,234px,3691px,2458px&resize=620,413");
  animation: fade1 10s infinite;
}
.slide-2 {
  background-image: url("https://images.unsplash.com/photo-1490100886609-e401a775fb3a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
  animation: fade2 10s infinite;
}
.slide-3 {
  background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  animation: fade3 10s infinite;
}

@keyframes fade1 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade2 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fade3 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

<body class="slider">
    <div class="slide slide-1"></div>
    <div class="slide slide-2"></div>
    <div class="slide slide-3"></div>
</body>

【问题讨论】：

标签： css css-animations css-transitions keyframe

【解决方案1】：

CSS 动画是可行的，但需要一些技巧。您的代码不起作用的原因是所有的 CSS 动画都同时发生。你想要的是确保fade1、fade2和fade3都以连续的时间间隔开始和停止，这样它们就会一个接一个地出现：

fade1 从 0% 开始，在 33% (1/3) 结束
fade2 从 33% (1/3) 开始，在 67% (2/3) 结束
fade3 从 67% (2/3) 开始，到 100% (3/3) 结束

当然，这意味着您需要 (1) 为添加的每张幻灯片声明一个新的关键帧，以及 (2) 在添加新幻灯片时调整所有个关键帧的起点/终点.这可能很麻烦，而自动化（或以编程方式进行）的唯一方法是使用 JS 或预处理的 CSS。

请参阅下面的概念验证：

.slider {
  margin: 0;
  padding: 0;
}
  
  .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
}

.slide-1 {
  background-image: url("https://images.immediate.co.uk/production/volatile/sites/23/2019/10/Federico_Veronesi_Lions-cover-image-e359a4e.jpg?quality=45&crop=10px,234px,3691px,2458px&resize=620,413");
  animation: fade1 10s infinite;
}
.slide-2 {
  background-image: url("https://images.unsplash.com/photo-1490100886609-e401a775fb3a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80");
  animation: fade2 10s infinite;
}
.slide-3 {
  background-image: url("https://images.pexels.com/photos/326055/pexels-photo-326055.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
  animation: fade3 10s infinite;
}

@keyframes fade1 {
  0% {
    opacity: 0;
  }

  33% {
    opacity: 1;
  }
}

@keyframes fade2 {
  33% {
    opacity: 0;
  }

  67% {
    opacity: 1;
  }
}

@keyframes fade3 {
  67% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

<body class="slider">
    <div class="slide slide-1"></div>
    <div class="slide slide-2"></div>
    <div class="slide slide-3"></div>
</body>

SCSS 解决方案

如果您使用的是 CSS 预处理器，例如 SCSS，您可以简单地动态生成幻灯片：您只需记住添加相应的标记：

// Just some demo images
$images: [
  'https://via.placeholder.com/400x300/3077FF/fff?text=Slide1',
  'https://via.placeholder.com/400x300/2C9EE8/fff?text=Slide2',
  'https://via.placeholder.com/400x300/3DE4FF/fff?text=Slide3',
  'https://via.placeholder.com/400x300/2CE8CE/fff?text=Slide4',
  'https://via.placeholder.com/400x300/30FFA8/fff?text=Slide5',
];

.slide {
  position: absolute;
  width: 400px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
}

@for $i from 1 through length($images) {
    $image: nth($images, $i);

    // Custom animation styles and background image for each slide
    .slide-#{$i} {
      animation: fade#{$i} 10s infinite;
      background-image: url(#{$image});
    }

    // Generate keyframe for each slide
    @keyframes fade#{$i} {
      #{(($i - 1) / length($images)) * 100%} {
        opacity: 0;
      }

      #{($i / length($images)) * 100%} {
        opacity: 1;
      }
    }
}

参见下面的示例（CSS 已预编译）：

.slider {
  margin: 0;
  padding: 0;
}

.slide {
  position: absolute;
  width: 400px;
  height: 300px;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0;
}

.slide-1 {
  animation: fade1 10s infinite;
  background-image: url(https://via.placeholder.com/400x300/3077FF/fff?text=Slide1);
}

@keyframes fade1 {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
}
.slide-2 {
  animation: fade2 10s infinite;
  background-image: url(https://via.placeholder.com/400x300/2C9EE8/fff?text=Slide2);
}

@keyframes fade2 {
  20% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
}
.slide-3 {
  animation: fade3 10s infinite;
  background-image: url(https://via.placeholder.com/400x300/3DE4FF/fff?text=Slide3);
}

@keyframes fade3 {
  40% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
}
.slide-4 {
  animation: fade4 10s infinite;
  background-image: url(https://via.placeholder.com/400x300/2CE8CE/fff?text=Slide4);
}

@keyframes fade4 {
  60% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}
.slide-5 {
  animation: fade5 10s infinite;
  background-image: url(https://via.placeholder.com/400x300/30FFA8/fff?text=Slide5);
}

@keyframes fade5 {
  80% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="slider">
    <div class="slide slide-1"></div>
    <div class="slide slide-2"></div>
    <div class="slide slide-3"></div>
    <div class="slide slide-4"></div>
    <div class="slide slide-5"></div>
</div>

【讨论】：

正是我想要的结果！谢谢！您介意展示一下如何使用 JavaScript 或 jQuery 来完成吗？您可能知道的链接也会很有用。
@Joehat 我添加了一个 SCSS 示例。对于基于 JS 的示例，有很多滑块/图库插件，StackOverflow 上也有很多代码可以重用和重新利用。
对于SCSS版本，有没有办法防止循环重启时背景空白？
你能给我关于.slide的宽度和高度的建议吗？我第一次有width: 100%; height: 100%，我所有的项目都已经响应了，但我注意到包含 .slide 的页面内容不是。我相信这是因为 100%。打开浏览器的响应工具时，我注意到了这个问题。在桌面上可以，但在较小的屏幕上不行。媒体查询仅在包含幻灯片动画的页面中被忽略...
当我使用响应式工具手动调整屏幕尺寸时，媒体查询工作正常。例如，当我在 iPhone X 上单击时，它不会。我在手机上打开了这个网站，它假设它是一个桌面屏幕，因为媒体查询再次被忽略了。再一次，这只发生在这个页面上。我使用 mixins 进行媒体查询，所以那里没有拼写错误...希望您能提供帮助，以便我知道究竟是什么原因造成的...

【解决方案2】：

要进行渐变过渡，您需要向关键帧添加百分比。这描述了您希望图像出现在屏幕上的时间百分比。对于这个例子，你选择了三个，所以它是 100/3，不幸的是 33.33333（你明白了。）

无论如何，这是您的三张图像的更新关键帧。要调整这 10 多张图片，您只需调整到 100/10（每张图片调整 10%）。

所有都应该以 0% 的不透明度 0 开始，然后以起始百分比的不透明度 0 开始（在第一张图像的情况下，它是 33%。然后 0 不透明度在 100%。

    @keyframes fade1 {
  0% {
    opacity: 0;
  }

  33% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    }
}

@keyframes fade2 {
  0% {
    opacity: 0;
  }
  33% {
    opacity: 0;
  }

  66% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    }
}

@keyframes fade3 {
  0% {
    opacity: 0;
  }
  66% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

如果您想进一步解释，请告诉我。

【讨论】：