css图片上面出现遮罩效果

CSS是前端开发中不可或缺的一种技术。它不仅可以美化页面，还能添加各种交互效果。其中，使用CSS实现图片上方的遮罩效果是一种比较常见的技巧。 首先，我们需要在HTML中插入一张图片，并用div元素将其包裹起来。然后，我们定义两个不同的类名，分别为“img”和“overlay”。其中，“img”类名用于设置图片的显示效果，而“overlay”类名用于设置遮罩层的效果。

<div class="img">
  <img src="example.jpg" alt="example">
  <div class="overlay"></div>
</div>

接下来，我们就可以使用CSS的伪类选择器“::before”来实现遮罩效果。设置遮罩层的样式，可以使用CSS的“background-color”属性来设置遮罩层的颜色，并设置遮罩层的不透明度（opacity）。同时，为了遮罩层具有透明度，我们还可以使用CSS中的“rgba”（红、绿、蓝和alpha）属性来设置颜色和透明度。最后，我们再用CSS样式设置遮罩层的大小和定位。下面是完整的CSS代码：

.img {
  position: relative;
  max-width: 100%;
}

.overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  background-color: rgba(0,0.5);
}

.img:hover .overlay::before {
  opacity: 0;
}

以上代码中，“::before”伪类选择器用于在元素内容前插入内容。为了实现鼠标移动到图片上时遮罩层逐渐消失的效果，我们使用了:hover伪类选择器。 最后，通过使用“opacity”属性设置遮罩层的透明度，我们可以轻松实现图片上方的遮罩效果。用CSS代码实现这种效果的好处是，可以避免使用JavaScript，从而更加轻量级地进行开发。 总之，通过以上的步骤，我们可以实现一款美观的图片遮罩效果，同时也能提升网站的用户交互度和用户体验。