Как применить линейный градиент к изображению без потери анимации? - PullRequest
Новая
       4

Как применить линейный градиент к изображению без потери анимации?

1 голос
/ 20 января 2020

Это мой код:

HTML: 

<div class="hidden">
      <img src="img/homebg/bg2.jpg" />
      <img src="img/homebg/bg3.jpg" />
      <img src="img/homebg/bg4.jpg" />
      <img src="img/homebg/bg5.jpg" />
    </div>

    <div class="slider">
      <div class="container">
        <h1>Мышонок</h1>
      </div>
    </div>

CSS: 

/* Slider */
.slider {
  height: 100vh;

  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../img/homebg/bg1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  animation: slide 18s infinite;
  transition: 100ms ease-in-out;
}

.slider h1 {
  color: #fff;
  font-size: 50px;
  padding-top: 40px;
  text-transform: uppercase;
}

.hidden {
  display: none;
}

@keyframes slide {
  0% {
    background-image: url(../img/homebg/bg1.jpg);
  }

  20% {
    background-image: url(../img/homebg/bg2.jpg);
  }
  40% {
    background-image: url(../img/homebg/bg3.jpg);
  }
  60% {
    background-image: url(../img/homebg/bg4.jpg);
  }
  80% {
    background-image: url(../img/homebg/bg5.jpg);
  }
  100% {
    background-image: url(../img/homebg/bg1.jpg);
  }
}

Мне нужно, чтобы каждое изображение в ключевом кадре было также линейным -градиент, как в .slider image-background, но если я применю его следующим образом: 

20% {
    background-image: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url(../img/homebg/bg2.jpg);
  }

Тогда я потеряю переход easy-in-out. Изображение просто появляется мгновенно при 20%, у него есть градиент, но оно не переходит в режим замедления. Как это исправить?

1 Ответ

1 голос
/ 20 января 2020

Решение:

Я просто добавил div с оверлеем отдельно вместо использования свойства линейного градиента для background-image:

HTML: 

<div class="slider">
      <div class="overlay">
        <div class="container">
          <h1>Мышонок</h1>
        </div>
      </div>
    </div>

CSS: 

.overlay {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.slider h1 {
  font-family: "Bangers", cursive;
  font-size: 50px;
  color: #fff;
  padding-top: 40px;
  text-transform: uppercase;
  z-index: 1;
}
...