Question

代码使得网站的背景图像在5个不同的图像之间转换，但每次动画完成并且下一个动画从那里开始是白色闪光。我如何摆脱它或我做错了什么？我不确定如何以其他任何方式解释它。

＆＃13;

@keyframes backswitch {
  0% {
    background-image: url("background.jpg");
  }
  20% {
    background-image: url("background_2.jpg");
  }
  40% {
    background-image: url("background_3.jpg");
  }
  60% {
    background-image: url("background_4.jpg");
  }
  80% {
    background-image: url("background_5.jpg");
  }
  100% {
    background-image: url("background_6.jpg");
  }
}

body {
  /*Adjusting images and animation*/
  background-repeat: no-repeat;
  max-width: 100%;
  max-height: 100%;
  background-size: cover;
  animation-name: backswitch;
  animation-duration: 60s;
  animation-iteration-count: infinite;
}

＆＃13;

<!DOCTYPE html>
<html>

<body>
</body>

</html>

＆＃13;

Answer 1

您必须预先加载图片：

@keyframes backswitch {
  0% {background-image: url("https://dummyimage.com/300/ccc/fff.png");}
  20% {background-image: url("https://dummyimage.com/300/3f5/fff.png");}
  40% {background-image: url("https://dummyimage.com/300/71c/fff.png");}
  60% {background-image: url("https://dummyimage.com/300/228/fff.png");}
  80% {background-image: url("https://dummyimage.com/300/c11/fff.png");}
  100% {background-image: url("https://dummyimage.com/300/544/fff.png");}
}
body {
  /*Adjusting images and animation*/
  background-repeat: no-repeat;
  max-width: 100%;
  max-height: 100%;
  background-size: cover;
  animation-name: backswitch;
  animation-duration: 60s;
  animation-iteration-count: infinite;
}

div.preload-images {
  background: url("https://dummyimage.com/300/ccc/fff.png") no-repeat -9999px -9999px;
  background: url("https://dummyimage.com/300/ccc/fff.png") no-repeat -9999px -9999px,
    url("https://dummyimage.com/300/3f5/fff.png") no-repeat -9999px -9999px,
    url("https://dummyimage.com/300/71c/fff.png") no-repeat -9999px -9999px,
    url("https://dummyimage.com/300/228/fff.png") no-repeat -9999px -9999px,
    url("https://dummyimage.com/300/c11/fff.png") no-repeat -9999px -9999px,
    url("https://dummyimage.com/300/544/fff.png") no-repeat -9999px -9999px;
}

<body>
  <div class="preload-images"></div>
</body>

Answer 2

如果将背景图像属性分配给主体，则可以预加载所有图像，并且此问题应会消失。

body {
  background-image: url("background_1.jpg"), url("background_2.jpg"), url("background_3.jpg"), url("background_4.jpg"), url("background_5.jpg"), url("background_6.jpg");
  background-repeat: no-repeat;
  max-width: 100%;
  max-height: 100%;
  background-size: cover;
  animation-name: backswitch;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  
}

@keyframes backswitch {
  0% {
    background-image: url("background.jpg");
  }
  20% {
    background-image: url("background_2.jpg");
  }
  40% {
    background-image: url("background_3.jpg");
  }
  60% {
    background-image: url("background_4.jpg");
  }
  80% {
    background-image: url("background_5.jpg");
  }
  100% {
    background-image: url("background_6.jpg");
  }
}

Answer 3

我检查了标准图像（与背景图像相反）的行为。他们似乎没有遇到这个问题，至少在 Firefox 或 Chrome 中没有。因此，您可以将顶层内容放在 z-index 为 1 的相对 div 中，然后将图像放在 z-index 为 0 的绝对 div 中。应该不会花很长时间更新您的 css 并使所有内容都适合。

如何在使用动画更改背景图像时摆脱白色闪光？

3 个答案: