带有 CSS 的背景幻灯片（全屏+响应式）答案

【问题标题】：Background slideshow with CSS (fullscreen+responsive)带有 CSS 的背景幻灯片（全屏+响应式）
【发布时间】：2018-01-08 01:59:58
【问题描述】：

有没有一种简单的方法，只使用 CSS 来启用背景图片幻灯片？我在 CSS 的 html 属性中将背景图像定义为全屏和响应式，并希望它具有简单的过渡效果。 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 类吗？唯一的“问题”是背景需要全屏和响应式。

【问题讨论】：

标签： css background slideshow

【解决方案1】：

你可以像这样使用容器 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 中？
可以分享幻灯片的html，我可以把它放在正确的地方
，但是，我没有幻灯片的 CSS 代码可以按我的意愿工作（转换太快等），并且基于另一种方法
这是你要的！？
循环不一致，在系列结束时变为空白。