css 图片上加蒙层

CSS提供了许多方式来美化我们的网页，其中一种就是在图片上加入蒙层。这种效果可以让图片更有层次感，更具有视觉冲击力。下面我们来看一下如何使用CSS在图片上添加蒙层。

//HTML代码
<div class="image">
  <img src="picture.jpg" alt="这是一张图片">
  <div class="overlay"></div>
</div>

//CSS代码
.image {
  position: relative;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0.5);
  z-index: 1;
}

.image img {
  z-index: 0;
}

首先我们给包含图片的div元素添加了一个相对定位的样式，这是为了能让我们接下来绝对定位的蒙层元素相对于它进行定位。然后我们在这个div元素中添加了一个img元素，这个是我们要加蒙层的图片。

然后，我们又添加了一个div元素作为蒙层层叠在图片上。我们将这个蒙层元素绝对定位，并且设置上边和左边分别为0，这样就可以完全覆盖住图片了。我们还将蒙层元素的高度和宽度都设置为100%以填满整个div元素，这样就可以确保蒙层元素能够完全覆盖住图片元素。

最后我们设置蒙层元素的背景色为rgba(0,0.5)，这样就可以实现一种类似于黑色遮罩的效果。rgba()函数中的第四个参数0.5表示透明度，这个数值可以根据实际情况进行调整。

最后我们将图片元素的z-index属性设置为0，将蒙层元素的z-index属性设置为1，这样就可以保证蒙层元素覆盖在图片元素之上了。

通过为图片添加蒙层，我们可以为网页添加一种更加炫酷的视觉效果，帮助我们吸引更多的用户。如果您还没有尝试过这种效果，可以考虑添加到您的网页中去。