CSS 背景幻灯片(全屏+响应式)
Background slideshow with CSS (fullscreen+responsive)
是否有仅使用 CSS 的简单方法来启用背景图片幻灯片?
我在 html 属性 in CSS 中将背景图像定义为全屏和响应式,并希望它具有简单的过渡效果。 CSS 看起来像这样:
html {
background: url(slike/bg.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
我需要在html中定义它并制作一个新的CSS class吗?唯一的 'problem' 是背景需要全屏和响应。
您可以像这样使用容器 div 来做到这一点
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>
试试这个现在滑块只使用 css 你可以通过改变动画持续时间来修改时间
是否有仅使用 CSS 的简单方法来启用背景图片幻灯片? 我在 html 属性 in CSS 中将背景图像定义为全屏和响应式,并希望它具有简单的过渡效果。 CSS 看起来像这样:
html {
background: url(slike/bg.jpg) no-repeat center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
我需要在html中定义它并制作一个新的CSS class吗?唯一的 'problem' 是背景需要全屏和响应。
您可以像这样使用容器 div 来做到这一点
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>
试试这个现在滑块只使用 css 你可以通过改变动画持续时间来修改时间