Css Hintergrund Diashow

Question

Ich mache eine Website, und ich frage mich, ob es möglich ist, eine Diashow von Hintergrundbildern zu machen. Ist das ohne JavaScript möglich? Wenn nicht, bin ich immer noch offen für Vorschläge.

Ich habe eine feste NarrowBar an der Spitze, also vermeide ich absolute Position.

HTML

<div class="back1"> 
</div> 

CSS

.back1{ 
height:550px; 
margin-left:-5px; 
margin-right:-8px; 
background-image: url("images/Image.jpg"); 
background-size: cover; 
background-repeat: no-repeat; 
background-position: center; 

} 

Answer 1

den folgenden Link Versuchen. Nur Vollbild-Hintergrundbild css.

https://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

Answer 2

Es ist! Hier ist someone's codepen zeigt eine Lösung, aber Googeln "css nur Hintergrundbild Diashow" wird Ihnen viele weitere Optionen geben. Der Schlüssel zum Rätseln sind CSS-Keyframes.

die HAML/HTML

%ul.slideshow 
%li 
    %h3 The Seasons 
    %span Summer 

%li 
    %span Fall 

%li 
    %span Winter 

%li 
    %span Spring 

Die CSS

@import "bourbon"; 

html { 
    min-height: 100%; 
} 

body { 
    height: 100%; 
} 

// length of each slide in seconds 
$animation-delay: 6s; 

.slideshow { 
    list-style: none; 
    z-index: 1; 
    li { 
    span { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     color: transparent; 
     background-size: cover; 
     background-position: 50% 50%; 
     background-repeat: none; 
     opacity: 0; 
     z-index: 0; 
     -webkit-backface-visibility: hidden; 
     backface-visibility: hidden; 
     // multiply slide duration by the total number of slides 
     @include animation(imageAnimation $animation-delay * 4 linear infinite 0s); 
    } 
    h3 { 
     position: absolute; 
     text-align: center; 
     z-index: 2; 
     bottom: 150px; 
     left: 0; 
     right: 0; 
     opacity: 0; 
     font-size: em(65px); 
     font-family: 'Josefin Sans', sans-serif; 
     text-transform: uppercase; 
     color: #fff; 
     // multiply slide duration by the total number of slides 
     @include animation(titleAnimation $animation-delay * 4 linear 1 0s); 

     @media only screen and (min-width: 768px) { 
     bottom: 30px; 
     font-size: em(130px); 
     } 

     @media only screen and (min-width: 1024px) { 
     font-size: em(175px); 
     } 
    } 
    } 
} 

// add and remove new slides here, maintaning the animation-delay format 
.slideshow li:nth-child(1) span { 
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/summer-slide.jpg); 
} 
.slideshow li:nth-child(2) span { 
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/fall-slide.jpg); 
    @include animation-delay($animation-delay); 
} 
.slideshow li:nth-child(3) span { 
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/winter-slide.jpg); 
    @include animation-delay($animation-delay * 2); 
} 
.slideshow li:nth-child(4) span { 
    background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/spring-slide.jpg); 
    @include animation-delay($animation-delay * 3); 
} 

// animation for the slideshow images 
@include keyframes(imageAnimation) { 
    0% { 
    opacity: 0; 
    @include animation-timing-function(ease-in); 
    } 
    12.5% { 
    opacity: 1; 
    @include animation-timing-function(ease-out); 
    } 
    25% { 
    opacity: 1; 
    } 
    37.5% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 0; 
    } 
} 

// animation for the title 
@include keyframes(titleAnimation) { 
    0% { 
    opacity: 0; 
    } 
    12.5% { 
    opacity: 1; 
    } 
    25% { 
    opacity: 1; 
    } 
    37.5% { 
    opacity: 0; 
    } 
    100% { 
    opacity: 0; 
    } 
} 

// modernizr is used to show the first slide as a fallback for when css animations are not supported 
.no-cssanimations .slideshow li span { 
    opacity: 1; 
}