CSS 伪元素写遮罩层

334 阅读1分钟

伪元素写遮罩层.png

.tudou{
    positon:relative;
}
.tudou::before{
    content:'';
    /*隐藏遮罩层*/
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    /*播放按钮图标*/
    background:rgba(0,0,0,0.4)  url(图标地址) no-repeat center;
}
/*鼠标经过显示遮罩层*/
.tudou:hover::before{
    /*显示遮罩层*/
    display:block;
}

<div class='tudou'>
	<img src="图片地址">
</div>