前端实战|利用CSS实现图片遮罩与高亮的效果

html代码

<div class="img-box">
			<img src="img/aaa.jpg" class="img"/>
			<p class="load" style="display: none;"></p>
		</div>

CSS代码

* {
font-family: Arial "微软雅黑";
margin:0;
padding:0;
}
.img-box{
position: relative;
width:200px;
margin-bottom: 20px;
}
.img-box p{
position: absolute;
left: 0;
top: 0;
right: 0;
line-height: 133PX;
height: 133PX;
text-align: center;
color: #fff;
background-color: rgba(0,0,0,.5);
}
.img{
width:100%;
display: block;
}