前端实战|利用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}}人
人已赞赏

对于SEO网站标题、关键词以及描述应当怎样写?

2019-12-19 18:58:34

【技术篇】关于女性文胸尺码的深入探讨及相关知识整合

2019-2-26 15:30:25

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