CSS анимация фонового изображения становится пустой - PullRequest
Новая
       75

CSS анимация фонового изображения становится пустой

0 голосов
/ 19 сентября 2019

Вот ДЕМО для моей проблемы.Когда фоновая анимация меняет непрозрачность, появляется белый слой.Как решить эту проблему и заставить анимацию играть так, как должно быть?

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

1 Ответ

1 голос
/ 19 сентября 2019

Если вы хотите удалить белый слой, просто добавьте цвет фона к вашему элементу body: 

body{
  background: black;
}
...