HTML+CSS系列实战之添加遮罩层

最新推荐文章于 2022-04-27 15:41:10 发布

bear*6

最新推荐文章于 2022-04-27 15:41:10 发布

阅读量5.5k

点赞数 8

分类专栏：前端样例实战文章标签： css3 css html5

本文链接：https://blog.csdn.net/m0_48375854/article/details/121170539

版权

前端样例实战专栏收录该内容

10 篇文章 6 订阅

订阅专栏

本文介绍了如何使用CSS创建鼠标悬停时显示遮罩层的图片效果。方法一是通过在图片前添加一个遮罩盒子，利用绝对定位和hover伪类实现。方法二是利用伪元素选择器before在图片盒子前面创建遮罩层。两种方法均能有效实现效果，但后者更为简洁，不需要额外的HTML结构，因此推荐使用。

摘要由CSDN通过智能技术生成

在这里我们将完成一个当鼠标经过某个图片时，图片添加遮罩层的效果。为了方便起见，小熊这里只写了两个盒子。
实现思路是：将遮罩的盒子覆盖在图片上，遮罩的盒子不占有位置，所以用绝对定位和 display 配合使用。当鼠标经过时，让遮罩的盒子显示display:block，鼠标离开时，让遮罩的盒子隐藏display:none。在这里用两种方法来实现效果。
（1）常规法，给每个图片前面加一个同样大小的盒子通过设置属性作为遮罩层通过绝对定位分别加到每个图片上。
代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .college {
            position: relative;
            width: 512px;
            height: 256px;
            margin: 20px auto;
        }
        .college img {
            width: 100%;
            height: 100%;
        }
        .mask {
            display:none;
            position: absolute;
            top:0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .4) 
        }
        .college:hover .mask{
            display: block;
        }
    </style>
</head>
<body>
    <div class='college'>
        <div class="mask"></div>
        <img src="college.jpg" alt="">
    </div>
    <div class='college'>
        <div class="mask"></div>
        <img src="college1.jpg" alt="">
    </div>
</body>
</html>

实现效果为：
在这里插入图片描述
（2）通过伪元素选择器法。就是通过before在图片盒子前面创建遮罩层的图片。
实现代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         .college {
            position: relative;
            float: left;
            width: 512px;
            height: 256px;
            margin: 20px 20px;
        }
        .college img {
            width: 100%;
            height: 100%;
        }
        .college::before{
            content:'';
            display: none;
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .4) ;
        }
        .college:hover::before {/* 当鼠标经过了college这个盒子，就让里面before遮罩层显示出来 */
            display: block;
        }
    </style>
</head>
<body>
    <div class='college'>
        <img src="college.jpg" alt="">
    </div>
    <div class='college'>
        <img src="college1.jpg" alt="">
    </div>
</body>
</html>

实现效果为：
在这里插入图片描述
为了区别两种效果，我将方法二实现的效果横排显示，可以发现，两种方法都可以实现遮罩层的效果，但是再具体运用中，方案二更加方便，不需要在额外给每个图片添加盒子，更推荐第二种方案。

bear*6

关注

8
点赞
踩
31

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS系列实战之添加遮罩层

        在这里我们将完成一个当鼠标经过某个图片时，图片添加遮罩层的效果。为了方便起见，小熊这里只写了两个盒子。        实现思路是：将遮罩的盒子覆盖在图片上，遮罩的盒子不占有位置，所以用绝对定位和 display 配合使用。当鼠标经过时，让遮罩的盒子显示display:block，鼠标离开时，让遮罩的盒子隐藏display:none
复制链接

扫一扫

专栏目录