CSS幻灯片显示2图像div在Chrome中无法正常工作

Question

我有一个CSS幻灯片，在Firefox和Chrome中显示不同。关于CSS的一个值得注意的是，一个“图”是包含两个图像的div - 而第一个图是一个简单图像，第二个图是包含背景图像的div和要覆盖在其上的较小图像。

在Firefox 57中，幻灯片显示“正确”，正如我所预期的那样。但是在初始显示的Chrome 62中，叠加图像出现在第一张幻灯片的顶部 - 而它应该只显示在第二张幻灯片的顶部。但这只发生在初始显示器上（或重新加载时） - 此后，随着幻灯片重复播放，第一张幻灯片按原样显示，没有叠加图像。

我在https://jsfiddle.net/glendeni/uwb13z87/上有一个精简的工作JSfiddle示例（注意它表现为Chrome，而不是ala Firefox）

我相信关键在于以下CSS

#figure-container { position: relative; }
#top {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

用第二个数字HTML

<figure>
   <div id="figure-container">
     <img class="center" src="second_slide.jpg">
     <img id="top" src="second_slide_overlay.png">
   </div>
 </figure>

我想知道是否有一些我可以添加的CSS或Javascript会阻止Chrome最初显示叠加图像，因为当前行为会阻止我使用叠加图像。

Answer 1

叠加层上的z-index使其显示在第一张和第二张幻灯片上方。但是，您只能在第一次运行的第一张幻灯片上方看到它，因为在2秒延迟后，动画开始，并在下次将其不透明度设置为零。

您可以通过在第一张幻灯片上设置更高的z-index来解决此问题，如下所示：

.css-slideshow-header figure:nth-child(2) { 
  animation: xfade 4s 0s infinite; 
  position:relative;
  z-index:2;
}