图像不重复

Question

我想知道为什么当我将背景重复设置为重复时，我的背景图像不重复。我使用的是bootstrap，这就是为什么有个col lg-6。我是一个编程新手，我想通过制作另一个网站的精确副本来测试我的技能。This is the website。如果你去那里，你可以看到我想要的东西。

​

.image-div {
  overflow: hidden;
}

#float {
  height: 100%;
  width: 100%;
  background:url(https://assets.maccarianagency.com/the-front/web-screens/home/home-hero-bg-dark.png);
  background-repeat: repeat;
  -webkit-animation: moving-img 7s infinite linear;
  animation: moving-img 7s infinite linear;
}




@keyframes moving-img {
  0% {
      transform: translate(0px, 0px) rotate(-15deg) scale(1);
  }

  100% {
      transform: translate(-400px, -600px) rotate(-15deg) scale(1);
  }
}

<div class="col-lg-6 image-div" style="height: 80vh; width: 50vw;">
  <div id="image"></div>
</div>

​

Answer 1

一种想法是，在图像div上有一个连续的向上滚动，然后我们将该div旋转15%。

首先，我们需要得到一个连续的卷轴。这可以通过在具有所需背景的图像div上放置之前和之后的伪元素来实现。然后这两个都向上动画，一个从top: 0 one开始，从top: 100%开始。这样滚动就是连续的--后面的伪元素紧跟在前面的伪元素之后。

到目前为止一切顺利，但是当我们旋转图像div时，父div会显示出一些间隙。因此，我们使之前和之后的伪元素在两个方向上的大小都是两倍，让它们的背景图像重复，并调整它们的位置，使它们始终覆盖父div。父对象也被赋予了overflow: hidden，所以我们看不到额外的部分。

这是一个有效的代码片段。请注意，背景图像宽度为30%的选择是任意的-更改为您想要的。

还要注意的是，要复制的网站有一个bug，虽然很小。有时你会在滚动中看到一个轻微的抖动。我们在这里克服了这个问题，通过让两组背景独立地设置动画，以便当第二组背景到达顶部时，第一组背景在瞬间变得不透明0，因为它将自己重新定位到顶部。这让我们误以为这一切都是连续的。该网站还在div的一部分上放置了一个“倾斜”白色，但这不是这里提出的问题的一部分。

​

.container {
}

.image-div {
  position: relative;
  overflow: hidden;
}

#image {
  position: absolute;
  transform: rotate(-15deg) translateX(-25%) translateY(-25%);
  height: 200%;
  width: 200%;
  overflow: hidden;
}

#image::before, #image::after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: 30% auto;
  background-image:url(https://assets.maccarianagency.com/the-front/web-screens/home/home-hero-bg-dark.png);
  background-repeat: repeat repeat;
  
  -webkit-animation: moving-img 7s infinite linear;
  animation: moving-img 7s infinite linear;
  z-index: 1;
}

#image::after {
  top:100%;
}

@keyframes moving-img {
  0% {
  transform: translate(0px, 0px);
  opacity: 1;
  }

  99.95% {
      transform: translateY(-100%);
      opacity: 1;
  }
  100% {
      transform: translate(0, 0);
      opacity: 0;
  }
}

<div class="col-lg-6 image-div" style="height: 80vh; width: 50vw;">
  <div id="image"></div>
</div>

​

Answer 2

试试下面的代码。如果你成功了，请让我知道。

<style>
.image-div {
  overflow: hidden;
}

#float {
  height: 100%;
  width: 100%;
  background:url(https://assets.maccarianagency.com/the-front/web-screens/home/home-hero-bg-dark.png);
  background-repeat: repeat;
  -webkit-animation: moving-img 7s infinite linear;
  animation: moving-img 7s infinite linear;
}




@keyframes moving-img {
  0% {
      transform: translate(0px, 0px) rotate(-15deg) scale(1);
  }

  100% {
      transform: translate(-400px, -600px) rotate(-15deg) scale(1);
  }
}
</style>
<div class="col-lg-6 image-div" style="height: 80vh; width: 50vw;">
  <div id="float"></div>
</div>