创建无限滚动垂直背景

Question

有大量的水平滚动背景，但这不是我的问题。每当我使用关键帧创建垂直滚动时，背景图像本身就会用完，或者它会完全出现故障并重新开始滚动效果。那不是我需要的。我需要一个占据整个屏幕宽度的无缝垂直滚动背景。将有一个隐藏溢出的容器，它的背景需要缓慢向上滚动，并带有一系列永远不会出现故障、用完等的图像。它需要看起来像水平滚动但垂直滚动的一百万个示例。

在CSS中是我使用的图像的实际尺寸。我正在使用一个占位符来开始这个对话。请注意，即使有占位符，图像最终也会停止。

为什么它在垂直滚动时执行此操作，而在水平滚动时通常不执行此操作？不管你信不信，这对我来说没有意义，而且关于背景图像的垂直无限滚动的资源并不多。

如果有人有什么建议，我会采纳。 JS 或 CSS 无论是什么，我都愿意倾听和学习，并理解为什么他妈的我搞不明白。谢谢

<div class="container">
    <div class="sliding-background"></div>
</div>

.container {
    overflow: hidden;
    height: 600px;
  }
  
.sliding-background {
    background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
    height: 4980px;
    width: 1440px;
    animation: slide 30s linear infinite;
  }
  
  @keyframes slide{
    0% {
      transform: translate3d(0, 0, 0);
    }
    100% {
      transform: translate3d(0, -100%, 0);
    }
  }

    <div class="container">
        <div class="sliding-background"></div>
      </div>

Answer 1

如果您知道图像的确切高度，此解决方案应该可行：

body {
  margin: 0;
}

.container {
  overflow: hidden;
  height: 600px;
}

.sliding-background {
  --imageHeight: 900px;
  background: url("https://images.fineartamerica.com/images/artworkimages/mediumlarge/2/a-dramatic-image-of-a-tall-tree-sitting-against-moody-skies-in-the-background-with-blue-and-yellow-tones-chris-cook.jpg") repeat-y;
  height: calc(var(--imageHeight) * 2);
  animation: slide 4s linear infinite;
}

@keyframes slide { 
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(calc(var(--imageHeight) * -1));
  }
}

<div class="container">
  <div class="sliding-background"></div>
</div>

创建无限滚动垂直背景

Creating an Infinite Scrolling VERTICAL background

css

scroll

background

infinite