如何在带有背景图像的 div 块顶部添加黑色阴影？

Question

我现在正在创建一个与此演示网站非常相似的网站，该网站在页面上显示一些图像，并将鼠标悬停在特定图像上时会显示一些效果。 https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_portfolio2&stacked=h

在这个演示网站中，当我们将鼠标悬停在图像上时，图像的不透明度将从 0.5 更改为 1。但是，在我的网站中，页面上的所有图像都将被黑色图层覆盖，不透明度为 0.5。 当鼠标悬停在特定图像上时，该图像上的黑色图层将消失。 我怎样才能创造这种效果？ 非常感谢！

在我的代码中，我有这样的事情：

<div class="img-container">
<div style="float:left; background-image:url('img/a.jpg'); width: 100px;height: 100px;"></div>
<div style="float:left; background-image:url('img/b.jpg'); width: 100px;height: 100px;"></div>
</div>

我想在图像上添加一个不透明度为 0.5 的黑色图层？ 我怎样才能做到这一点？

Answer 1

 <style> .image{ background-image:url(https://www.w3schools.com/w3images/natureboy.jpg); background-size:cover; width:200px; height:200px; cursor:pointer; } .blackLayer{ width:100%; height:100%; background-color:#000; opacity:0.5; } .blackLayer:hover{ opacity:0; } </style> <div class="image"> <div class="blackLayer"></div> </div>