Wie wird das Hintergrundbild einzeln angezeigt?

Question

CSS-Code

#intro { 
     position: relative; 
     background-attachment: fixed; 
     background-repeat: no-repeat; 
     background-position: center top; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     background-size: cover; 
     text-align: center; 
     padding-top: 15.6rem; 
     overflow: hidden; 
    } 
#intro > figure { 
       animation: imageAnimation 30s linear infinite 0s; 
       backface-visibility: hidden; 
       background-size: cover; 
       background-position: center center; 
       color: transparent; 
       height: 100%; 
       left: 0px; 
       opacity: 0; 
       position: absolute; 
       top: 0px; 
       width: 100%; 
       z-index: 0; 
       margin-left: 0px; 
      } 
#intro > figure:nth-child(1){ 
          background-image: url('../images/1.jpg'); 
         } 
#intro > figure:nth-child(2){ 
          animation-delay: 6s; 
          background-image: url('../images/2.jpg'); 
         } 
#intro > figure:nth-child(3){ 
          animation-delay: 12s; 
          background-image: url('../images/3.jpg'); 
         } 

HTML-Code:

<section id="intro"> 
    <figure></figure> 
    <figure></figure> 
    <figure></figure> 
</section> 

In diesem Code, den ich hier werde Hintergrundbild einer nach dem anderen angezeigt werden, aber wenn Hintergrundbild einer nach seinem Display schwarz dritte Bild, das durch eine fade out Hintergrund. Also, wie kann ich schwarzen Hintergrund entfernen Ich möchte nur Bilder mit CSS anzeigen.

Danke

Answer 1

Wenn es nicht Grund ist jQuery-Plugins vermeiden, versuchen Sie einfach Slick carousel zu verwenden.

Werfen Sie einen Blick auf "Fade", es funktioniert super.