无限滚动背景答案

【问题标题】：Infinite scrolling background无限滚动背景
【发布时间】：2016-04-20 09:48:50
【问题描述】：

我已经使用背景位置属性在一定程度上实现了无限滚动背景。但问题是我已经给出了值 background-position:0 200px 在关键帧中，在向下移动到 200 像素后，背景图像从头开始重新移动。我不希望这种情况发生，它应该无限滚动而不会出现任何问题。怎么办？

这是代码。

html:

 <div id="cloud-scroll"></div>

css:

       #cloud-scroll {
        width: 275px;
       height: 183px;
       background: url(http://www.html5andbeyond.com/3t-JAiBqopF/uploads/2014/10/clouds-full.png);
      background-size:cover;
      -webkit-animation: backgroundScroll 20s linear infinite;
      animation: backgroundScroll 20s linear infinite;
       }

       @-webkit-keyframes backgroundScroll {
          from {background-position:0;}
          to {background-position:0 200px;}
       }

      @keyframes backgroundScroll {
       from {background-position:0;}
        to {background-position:0 200px;}
       }

【问题讨论】：

有一个值的线性运动，其中背景最终匹配（可以使用背景图像的高度）

标签： html css

【解决方案1】：

您应该使用 background-repeat 并设置您的背景图像，以便当它垂直（或水平，如果您正在这样做）重复时，它是无缝的。

【讨论】：

【解决方案2】：

你的 div 是 183px 高，所以你应该在你的动画中使用 183px。

@keyframes backgroundScroll {
   from {background-position:0;}
   to {background-position:0 183px;}
}

【讨论】：