Html 如何为背景图像添加覆盖

我想在具有背景图像的div上添加一个覆盖。div将从php生成。每个div都有一个背景图像

当我尝试在具有背景图像的div顶部添加渐变覆盖时，我看不到任何变化

我该怎么做

这是我试过的

Html

---

愿这对你有帮助。试试看：

最初，我添加了一个伪元素

：：after

作为覆盖，并指定了与

图像框

相同的大小，最初它的

显示：none但悬停时更改为
显示：块仅在悬停时应用覆盖


.image框{
位置：相对位置；
显示：内联块；
高度：200px；
宽度：200px；
}
.图像框：：之后{
位置：绝对位置；
排名：0；
左：0；
显示：无；
身高：100%；
宽度：100%；
背景：线性梯度（到底部，rgba（9,37,70,0.1），rgba（9,37,70,0.4），rgba（9,37,70,0.8））；
内容：''；
}
.图像框{
位置：相对位置；
显示：内联块；
高度：200px；
宽度：200px；
}
.图像框：悬停：：之后{
显示：块；
}

这就是您需要的吗@HelloWorld是的，但有悬停效应，这个能解决吗？覆盖仅在悬停时显示。@HelloWorld谢谢，同时我也能让它工作。您可以解释一下您的解决方案是如何工作的。这对于OP或其他阅读本文的人来说可能并不明显：）是的，谢谢你的建议。我已经编辑了我的帖子并解释了我的解决方案。
<div class="image-box" style="background-image:url(images/stacks.jpg);"></div>
<div class="image-box" style="background-image:url(images/random.jpg);"></div>
<div class="image-box" style="background-image:url(images/laos.jpg);"></div>
<div class="image-box" style="background-image:url(images/thai.jpg);"></div>
<div class="image-box" style="background-image:url(images/phils.jpg);"></div>
<div class="image-box" style="background-image:url(images/tabs.jpg);"></div>

.image-box:hover{
    background-image:linear-gradient(to bottom, rgba(9, 37, 70, 0.1),rgba(9, 37, 70, 0.4),rgba(9, 37, 70, 0.8));
}