CSS 背景图片动画变为空白

Question

这是针对我的问题的 DEMO。当背景动画改变不透明度时，会出现一个白色层。如何解决这个问题，让动画正常播放？

HTML

<main>
  <div class="main-headers">
    <div class="headers">
      <h1>This is Broadcast</h1>
      <p>Let's Go!</p>
      <a href="#">Play</a>
    </div>
  </div>
</main>

CSS

main {
  background: black;
  width: 100%;
  height: 850px;
  animation: BackgroundFadeIn 2.5s 2s forwards;
}

@keyframes BackgroundFadeIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: .5;
    background: black url("https://i.ibb.co/KGt62z0/banner.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }

  100% {
    opacity: 1;
    background: black url("https://i.ibb.co/KGt62z0/banner.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

Answer 1

如果您要求移除白色图层，只需为您的正文元素添加背景颜色即可：

body{
  background: black;
}

CSS 背景图片动画变为空白

CSS background image animation turn to blank

css

background-image

css-animations