我在背景上设置了<li>并添加了关键帧以循环显示图像。我的目标是使用这些动画创建精益循环的动画,但是我无法阻止背景图像的重复。

我无法控制一幅图像,而下面的一幅图像的大小和位置正确。

任何帮助,将不胜感激。



.cb-slideshow span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  background-size:cover;
  background-position: 50% 50%;
  opacity: 0;
  z-index: 0;
  animation: imageAnimation 8s linear infinite 0s;
  background-repeat: no-repeat;
}

.cb-slideshow li:nth-child(1) span {
  background-image: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span {
  background-image: url(../images/2.jpg);
  animation-delay: 1s;
}
.cb-slideshow li:nth-child(3) span {
  background-image: url(../images/3.jpg);
  animation-delay: 2s;
}
.cb-slideshow li:nth-child(4) span {
  background-image: url(../images/4.jpg);
  animation-delay: 3s;
}
.cb-slideshow li:nth-child(5) span {
  background-image: url(../images/5.jpg);
  animation-delay: 4s;
}
.cb-slideshow li:nth-child(6) span {
  background-image: url(../images/6.jpg);
  animation-delay: 5s;
}
.cb-slideshow li:nth-child(7) span {
  background-image: url(../images/7.jpg);
  animation-delay: 6s;
}
.cb-slideshow li:nth-child(8) span {
  background-image: url(../images/8.jpg);
  animation-delay: 7s;
}

@keyframes imageAnimation {
  0% { opacity: 0 }
  0.1% { opacity: 1 }
  12.5% { opacity: 1 }
  12.6% { opacity: 0 }
  100% { opacity: 0 }
}

.no-cssanimations .cb-slideshow li span{
  opacity: 1;
}

<ul class="cb-slideshow">
    <li>
        <span><img src="Images/1.jpg" ></span>
    </li>
    <li>
        <span><img src="Images/2.jpg" ></span>
    </li>
    <li>
        <span><img src="Images/3.jpg" ></span>
    </li>
    <li>
        <span><img src="Images/4.jpg" ></span>
    </li>
    <li>
        <span><img src="Images/5.jpg" ></span>
    </li>
    <li>
        <span><img src="Images/6.jpg" ></span>
    </li>
    <li>
        <span><img src="Images/7.jpg" ></span>
    </li>
    <li>
        <span><img src="Images/8.jpg" ></span>
    </li>
</ul>

最佳答案

您可以使用CSS属性background-repeat: no-repeat;防止图像重复。

10-07 19:14
查看更多