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;
}

重点是设置p标签的背景颜色  第一张图片是黑色带透明度的背景色，第二张图片是白色带透明度的背景色，第三张图片是原图