CSS常用遮罩层
应用场景：
上传了一张图片，鼠标移入到图片上的时候显示遮罩层，并且提示点击删除。
通过改变遮罩层的透明度来实现显示隐藏提示信息
<div class="parent">
<img src="" >
<div class="mask">点击删除图片</div>
</div>
下面是CSS
.mask {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
font: 20px/1.2 Microsoft YaHei, Arial, Helvetica, Arial, "5b8b4f53", sans-serif;
text-align: center;
background: #393D49;
color: #fff;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
}
.parent:hover .mask {
opacity: .8;
}
转载于:https://my.oschina.net/af666/blog/870142