停止用CSS重复背景

Question

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

有一张我无法控制的图像，而下面的图像尺寸和位置正确。

任何帮助都将不胜感激。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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