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

 

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

版权申明:网站字体及图片来源于互联网,如果侵犯了您的权利,请联系我们,我们将尽快改正我们的错误,谢谢您的理解!

给TA赞赏
共{{data.count}}人
人已赞赏

吉利要造火箭?副总裁杨学良:属实 招火箭总师

2020-4-23 18:29:24

怎么在网页中引用字体?

2020-2-22 23:34:32

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索