css盒子遮罩层显示与隐藏

最新推荐文章于 2024-05-30 16:48:43 发布

原创最新推荐文章于 2024-05-30 16:48:43 发布 · 1.9k 阅读

7 ·

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

标签

#定位 #html #css

CSS 专栏收录该内容

21 篇文章

订阅专栏

这篇博客详细介绍了如何使用HTML和CSS逐步创建一个带有遮罩层的图片展示效果。首先制作一个盒子并设置尺寸，然后在盒子内放入图片使其全屏显示，接着添加遮罩层并设置为绝对定位，再通过相对定位使遮罩层覆盖整个盒子。最后，通过CSS的:hover伪类实现鼠标悬停时遮罩层显示的效果。

实现效果要如图显示：
在这里插入图片描述

素材：两张图片
步骤一：制作一个盒子，记住它的尺寸和大小
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子遮罩层的显示与隐藏</title>
    <style>
        .box {
            width: 444px;
            height: 320px;
            margin: 100px auto;
            background-color: salmon;
        }
    </style>
</head>
<body>
    <!-- 步骤一：制作一个盒子出来 -->
    <div class="box">

    </div>
</body>
</html>

运行结果如下：
在这里插入图片描述
第二步:盒子里面放置一张图片，尺寸跟盒子100%对齐就可以了。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子遮罩层的显示与隐藏</title>
    <style>
        .box {
            width: 444px;
            height: 320px;
            margin: 100px auto;
            background-color: salmon;
        }
        .box img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <!-- 步骤一：制作一个盒子出来 -->
    <div class="box">
        <img src="images/img.jpg" alt="">
    </div>
</body>
</html>

运行结果如下:
在这里插入图片描述
第三步：设置遮罩层盒子。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子遮罩层的显示与隐藏</title>
    <style>
        .box {
            width: 444px;
            height: 320px;
            margin: 100px auto;
            background-color: salmon;
        }
        .box img {
            width: 100%;
            height: 100%;
        }
        .box .mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center;

        }
    </style>
</head>
<body>
    <!-- 步骤一：制作一个盒子出来 --> 
    <div class="box">
        <!-- /* 步骤二：盒子里面放置图片 */ -->
        <img src="images/img.jpg" alt="">
        <!-- /* 步骤三：盒子里面放置遮罩层 */ -->
        <div class="mask"></div>
    </div>
</body>

</html>

运行结果如下：
在这里插入图片描述
步骤四：目前是标准流盒子，所以上下排布，我们把遮罩层设置为绝对定位，就好了
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子遮罩层的显示与隐藏</title>
    <style>
        .box {
            width: 444px;
            height: 320px;
            margin: 100px auto;
            background-color: salmon;
        }
        .box img {
            width: 100%;
            height: 100%;
        }
        .box .mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <!-- 步骤一：制作一个盒子出来 --> 
    <div class="box">
        <!-- /* 步骤二：盒子里面放置图片 */ -->
        <img src="images/img.jpg" alt="">
        <!-- /* 步骤三：盒子里面放置遮罩层 */ -->
        <div class="mask"></div>
    </div>
</body>

</html>

运行结果如下:
在这里插入图片描述
步骤五：因为我们要在父盒子里面全屏显示的话，要设置子绝父相呀。给父亲加上相对定位试试。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子遮罩层的显示与隐藏</title>
    <style>
        .box {
            width: 444px;
            height: 320px;
            margin: 100px auto;
            background-color: salmon;
            position: relative;
        }
        .box img {
            width: 100%;
            height: 100%;
        }
        .box .mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <!-- 步骤一：制作一个盒子出来 --> 
    <div class="box">
        <!-- /* 步骤二：盒子里面放置图片 */ -->
        <img src="images/img.jpg" alt="">
        <!-- /* 步骤三：盒子里面放置遮罩层 */ -->
        <div class="mask"></div>
    </div>
</body>

</html>

运行结果如下：
在这里插入图片描述
步骤五:设置成鼠标滑过盒子的时候遮罩层出现。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>盒子遮罩层的显示与隐藏</title>
    <style>
        .box {
            width: 444px;
            height: 320px;
            margin: 100px auto;
            background-color: salmon;
            position: relative;
        }
        .box img {
            width: 100%;
            height: 100%;
        }
        .box .mask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3) url(images/arr.png) no-repeat center;
            position: absolute;
            top: 0;
            left: 0;
            /* 先让遮罩层隐藏 */
            display: none;
        }
        /* 鼠标滑过盒子的时候遮罩层出现 */
        .box:hover .mask {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 步骤一：制作一个盒子出来 --> 
    <div class="box">
        <!-- /* 步骤二：盒子里面放置图片 */ -->
        <img src="images/img.jpg" alt="">
        <!-- /* 步骤三：盒子里面放置遮罩层 */ -->
        <div class="mask"></div>
    </div>
</body>

</html>

运行结果如下：
在这里插入图片描述