Question

我当前正在尝试创建动画背景图像。但是，每次滚动时，根据我的滚动方式，屏幕顶部/底部都会出现白色闪烁。

.hi {
 background-image: url("http://www.bsec-organization.org/Resources/images/mainSlider/mainSlider02.jpg");
 height: 5000px;
 background-repeat: repeat;
  animation: animatedBackground 500s linear infinite;
}
@keyframes animatedBackground {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -10000px 0;
  }
}

<div class="hi">
  hi
</div>

我注意到这只是Google Chrome中的一个问题，因为它可以在Safari中正常运行。有人知道如何解决此问题吗？谢谢！

Answer 1

以其他方式依靠变换来获得更好的结果：

.hi {
  background-image: url("http://www.bsec-organization.org/Resources/images/mainSlider/mainSlider02.jpg");
  height: 5000px;
  background-repeat: repeat;
  position:relative;
  overflow:hidden;
  z-index:0;
}

.hi:before {
  content: "";
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  right:-100%;
  bottom:0;
  background:inherit;
  animation: animatedBackground 50s linear infinite;
}

@keyframes animatedBackground {
  to {
    transform:translateX(-50%);
  }
}

<div class="hi">
  hi
</div>

如何解决动画背景图像上的白色闪烁？

1 个答案: