用CSS（全屏+響應式）背景幻燈片

Question

有沒有簡單的方法，只使用CSS來啓用背景圖片幻燈片？ 我有背景圖像定義爲全屏和響應CSS內的html屬性，並希望它有一個簡單的過渡效果。該CSS是這樣的：

html { 
 
\t background: url(slike/bg.jpg) no-repeat center fixed; 
 
\t -webkit-background-size: cover; 
 
\t -moz-background-size: cover; 
 
\t -o-background-size: cover; 
 
\t background-size: cover; 
 
}

我需要在HTML定義它，使一個新的CSS類？唯一的問題是背景需要全屏和響應。

Answer 1

您可以通過使用這樣的

html,body { 
 

 
    width:100%; 
 
    height:100%; 
 
} 
 
body { 
 
margin: 0; 
 
} 
 
.container 
 
{ 
 
width:100%; 
 
height:100%; 
 
} 
 
#slideshow { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
    width:100%; 
 
    height:100%; 
 
    display: inline-block; 
 
} 
 
.elemnt,.elemnt1,.elemnt2,.elemnt3 { 
 
position: absolute; 
 
left: 0; 
 
width: 100%; 
 
background-repeat: no-repeat; 
 
background-size: cover; 
 
height: 100%; 
 
display: inline-block; 
 
text-align: center; 
 
} 
 
span{ 
 
    border: 1px solid #000; 
 
    border-radius: 3px; 
 
    box-shadow: 0 0 5px 0 hsla(0,0%,30%, .3); 
 
    font-size:4em; 
 
    background-color:#fff 
 
} 
 
.elemnt { 
 
    animation: xfade 16s 8s infinite; 
 
    background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/trek-sahara-sauvage-min.jpg'); 
 
} 
 
.elemnt1 { 
 
    animation: xfade 16s 6s infinite; 
 
    background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/sahara-desert-by-ellie-1024x683.jpg'); 
 
    
 
} 
 
.elemnt2 { 
 
    animation: xfade 16s 2s infinite; 
 
    background-image: url('https://pbs.twimg.com/media/C4JYsjcWYAAixfx.jpg'); 
 
} 
 
.elemnt3 { 
 
    animation: xfade 16s 0s infinite; 
 
    background-image: url('http://desert-maroc.com/wordpress2012/wp-content/uploads/trek-sahara-sauvage-min.jpg'); 
 
    
 
} 
 
@keyframes xfade{ 
 
    17% { 
 
    opacity:1; 
 
    } 
 
    25% { 
 
    opacity:0; 
 
    } 
 
    92% { 
 
    opacity:0; 
 
    } 
 
} 
 
@keyframes xfade1{ 
 
    17% { 
 
    opacity:1; 
 
    } 
 
    25% { 
 
    opacity:0; 
 
    } 
 
    92% { 
 
    opacity:0; 
 
    } 
 
} 
 
@keyframes xfade2{ 
 
    17% { 
 
    opacity:1; 
 
    } 
 
    25% { 
 
    opacity:0; 
 
    } 
 
    92% { 
 
    opacity:0; 
 
    } 
 
} 
 
@keyframes xfade3{ 
 
    17% { 
 
    opacity:1; 
 
    } 
 
    25% { 
 
    opacity:0; 
 
    } 
 
    92% { 
 
    opacity:0; 
 
    } 
 
}

<div class="container"> 
 
    <div id="slideshow"> 
 
    <div class="elemnt"><span>Text Slider 1</span></div> 
 
    <div class="elemnt1"><span>Text Slider 2</span></div> 
 
    <div class="elemnt2"><span>Text Slider 3</span></div> 
 
    <div class="elemnt3"><span>Text Slider 4</span></div> 
 
    </div> 
 
</div>

容器DIV試試這個現在滑塊僅使用CSS，你可以修改的時機做到這一點，通過改變動畫時間