HTML 练习实现遮罩层
程序员文章站
2022-05-18 23:10:28
``` Title 1000 ``` ......
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.left{
float: left;
}
.clearfix:after{
content: '.';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
.container{
background-color: red;
}
.container .item{
width: 180px;
height: 150px;
background-color: #303a40;
border: 1px solid red;
overflow: hidden;
position: relative;
}
.container .item:hover{
border: 1px solid green;
}
.container .item .text{
display: none;
}
.container .item:hover .text{
display: block;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="item left">
<div class="bg">
<img src="https://ss0.bdstatic.com/94ojfd_baact8t7mm9gukt-xh_/timg?image&quality=100&size=b4000_4000&sec=1552466288&di=2833711b147f456e54b1e555602e4694&src=http://hbimg.b0.upaiyun.com/01f13dd8fcbfcfd38bd13f92cca49a0bd8ec434b12cea-0yehtq_fw658" style="height: 150px; width: 180px;">
</div>
<div class="text">
<div style="z-index:9; position:absolute; left:0; right:0; top:0; bottom:0; background-color: black; opacity:0.6;"></div>
<div style="z-index:10; position:absolute; left:0; right:0; top:0; bottom:0;">1000</div>
</div>
</div>
</div>
</body>
</html> 上一篇： 有关ajax