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>

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

1 个答案: