时间戳

首页 > 解决方案 > 图片不重复

html - 图片不重复

问题描述

我想知道为什么当我将背景重复设置为重复时我的背景图像不重复。我正在使用引导程序，这就是为什么那里有 col-lg-6 的原因。我是编码新手，我想通过制作另一个网站的精确副本来测试我的技能。这是网站。如果你去那里，你可以确切地看到我想要的。

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

标签： htmlcssanimation

解决方案

试试下面的代码。让我知道你是否成功。

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

推荐阅读