如何在不丢失动画的情况下将线性渐变应用于图像？答案

【问题标题】：How to apply linear-gradient to image without loosing animation?如何在不丢失动画的情况下将线性渐变应用于图像？
【发布时间】：2020-05-06 20:39:46
【问题描述】：

这是我的代码：

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 图像背景一样具有线性渐变，但如果我这样应用它：

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

然后我失去了缓入缓出过渡。图像只是以 20% 的速度立即出现，它确实有渐变，但它没有过渡缓入缓出。如何解决这个问题？

【问题讨论】：

添加您的解决方案作为答案
好的。谢谢你。我是stackoverflow的新手

标签： html css image animation transition

【解决方案1】：

解决方案：

我只是单独添加了一个带有叠加层的 div，而不是对背景图像使用线性渐变属性：

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

【讨论】：