土豆网案例

最新推荐文章于 2024-08-04 20:38:28 发布

青柠杆菌

最新推荐文章于 2024-08-04 20:38:28 发布

阅读量238

点赞数

分类专栏： HTML和CSS（基于黑马程序员视频学习

本文链接：https://blog.csdn.net/jjlome/article/details/121745913

版权

css css3 html

HTML和CSS（基于黑马程序员视频学习专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        .tudo {
            position:relative;
            height: 280px;
            width: 520px;
            background-color: pink;
            margin: 30px auto;
        }
        .tudo img {
            height: 280px;
            width: 520px;
        }
        .mask {
            /*遮蔽盒子*/
            display: none;

            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 100%;
            background: rgba(0,0,0,.4) url(1.jpg) no-repeat center;
        }
        /*显示盒子mask*/
        .tudo:hover .mask {
            display: block;
        }
    </style>
</head>
<body>
    <div class="tudo">
        <img src="" alt="" />
        <div class="mask"></div>
    </div>
</body>
</html>

青柠杆菌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
土豆网案例

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <style> .tudo { position:relative; height: 280px;
复制链接

扫一扫

专栏目录