当前位置: 萬仟网 > IT编程>网页制作>CSS > HTML 练习实现遮罩层

HTML 练习实现遮罩层

11  人参与 | 时间:2019-03-14 | 我要评论
<!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>

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2019  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com