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を使用している今、これを試してみてください、あなたはアニメーションの再生時間

を変更することで、タイミングを変更することができます