css案例（一）遮罩层

原创已于 2023-10-04 12:18:07 修改 · 2.3k 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#css #前端

于 2023-10-01 16:52:41 首次发布

web前端基础专栏收录该内容

20 篇文章

订阅专栏

本文详细描述了如何使用HTML和CSS创建一个带有遮罩层的图片，通过CSS样式控制遮罩层的显示、位置、透明度和缩放，以实现鼠标悬停时的效果。

首先，准备一张图片

然后，在HTML文档中放一个div父盒子，里面放置了一个img标签和一个div标签，div标签有“HELLO”这一文本。

    <div class="box">
        <img src="./image/person01.jpg">
        <div class="cover">HELLO</div>
    </div>

接着，我们给父盒子指定基本样式：宽高200、边框圆角50%、白色的1px的直线边框、盒子阴影。

    .box {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            border: 1px solid white;
            box-shadow: 0 0 10px black;
         }

给图片设置大小：宽度为父盒子的100%，高度自适应。

        .box img {
            width: 100%;
        }

给类名叫做cover的div（这个div就是我们的遮罩层）设置如下的基本样式。

        .cover {
            width: 200px;
            height: 200px;
            background-color: black;
            color: white;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
        }

此时我们可以看到如下结果：

紧接着，我们可以通过定位把下面黑色的遮罩层放上来，同时将遮罩层的通明度设置为0、缩放设置为0。（注意：别忘了给父盒子box加上相对定位：position: relative哦，不然的话，遮罩层不会在原来图片的位置噢）

        .cover {
            position: absolute; /*定位*/
            top: 0;
            left: 0;
            opacity: 0; /*透明度*/
            transform: scale(0);/*缩放*/
        }

最后，我们给box设置当鼠标经过的时候，将遮罩层的透明度修改为0.4、缩放设置为1。在box里面添加overflow：hidden，用来把溢出内容隐藏。

        .box:hover .cover {
            opacity: 0.4;
            transform: scale(1);
        }

这样我们就实现了一个遮罩层小案例啦~，下面是实现效果：

鼠标放上去前：

鼠标放上去之后：

最后的最后是案例的完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            margin: 50px auto;
            border: 1px solid white;
            box-shadow: 0 0 10px black;
            position: relative;
            overflow: hidden;
        }

        .box img {
            width: 100%;
        }

        .cover {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: black;
            color: white;
            text-align: center;
            line-height: 200px;
            font-size: 30px;
            opacity: 0;
            transform: scale(0);
        }

        .box:hover .cover {
            opacity: 0.4;
            transform: scale(1);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./image/person01.jpg">
        <div class="cover">HELLO</div>
    </div>
</body>

</html>