css点击有遮罩层

今天我们来学习一下如何使用css实现点击有遮罩层的效果。
首先，我们来看一下html代码：

<div class="wrapper">
  <button class="btn">点击我</button>
  <div class="mask"></div>
</div> 

这里我们使用了一个wrapper包裹住一个button和一个mask层。
接下来，我们来看一下css代码：

.wrapper {
  position: relative;
}
.btn {
  z-index: 1;
}
.mask {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  top: 0;
  left: 0;
  display: none;
  z-index: 0;
}
.wrapper:hover .mask {
  display: block;
}
 

我们将wrapper设为相对定位，btn的z-index设为1，mask设为绝对定位，top和left设为0，宽高设为100%，背景色设为半透明的黑色。初始时，mask层的display为none，z-index设为0。
最后在wrapper的hover事件上，将mask的display设为block，这样当鼠标在wrapper上方时，mask就会显示出来。这样就实现了点击有遮罩层的效果啦！
希望这篇文章能对大家有所帮助！