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

Question

这是我的代码：

.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% 处立即出现，它确实具有渐变，但它不会过渡缓入。如何解决这个问题？

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