CSS常用遮罩层

为什么80%的码农都做不了架构师？>>>  

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, "\5b8b\4f53", 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