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, "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