前端实战|利用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;
}

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
相关推荐
  • 暂无相关文章
  • 评论 抢沙发
    头像
    欢迎您留下宝贵的见解!
    提交
    头像

    昵称

    取消
    昵称表情代码图片

      暂无评论内容