综合案例-仿土豆网显示隐藏遮罩层

最新推荐文章于 2024-05-31 09:45:22 发布

吉米的编程日记

最新推荐文章于 2024-05-31 09:45:22 发布

阅读量207

点赞数 1

文章标签：开发语言 html css 前端

本文链接：https://blog.csdn.net/m0_62211222/article/details/136877216

版权

代码实现

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>土豆网</title>
    <style>
        .tudou{
            position:relative;
            width:300px;
            height:300px;
            background-color:burlywood;
            margin:30px auto;
        }

        .tudou img{
            width:100%;
            height:100%;
        }

        .mask {
            display:none;/*隐藏遮罩层*/

            position: absolute;
            /*定位的口诀是子绝父相*/
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgb(0,0,0,0.3) url(https://img14.360buyimg.com/imagetools/jfs/t1/66037/3/24346/9414/64b11b21F51d90361/8f015973cbb7de8d.png) no-repeat center;
            /*京东的logo*/
        }

        .tudou:hover .mask {
            display: block;
            /* display: block; 显示遮罩层*/
        }
    </style>
</head>
<body>
    <div class="tudou">
        <div class="mask"></div>
        <img src="https://dimg04.c-ctrip.com/images/0224h12000bzm1ugt6F19_R_300_225_R5_Q70_D.jpg" alt="" />
    </div>
</body>
</html>