CSS背景图像动画变为空白

这里有一个解决我问题的方法。当背景动画更改不透明度时，将显示一个白色层。如何解决此问题，并使动画按应有的方式播放

HTML

---

如果您要求删除白色层，只需为身体元素添加背景色即可：

body{
  background: black;
}

---

谢谢你的帮助，这是wokred，但还有一个问题，标题消失了（或者黑色层覆盖了它们），我如何修复它？我不明白你的意思，我很抱歉看到演示，“广播，我们开始，播放”标题变黑了一会儿用于

.main

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

body{
  background: black;
}