html+css+js实现遮罩层的两种方法

一、div布局+css

1.html代码

<div class="a" id="a">
    <img src="img/page3_img1.jpg">
    <!--遮罩层开始-->
        <div class="b" id="b">
            <p>遮罩层</p>
        </div>
    <!--遮罩层结束-->
</div>

2.css样式

        .a{
            width: 300px;
            height: 218px;
            position: relative;
        }
        .b{
            width: 300px;
            height: 218px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(101, 101, 101, 0.6);
            opacity: 0;
            transition: all 1s;
        }
        .a:hover .b{
            opacity: 1;
            transition: all 1s;
        }

（1）外面的盒子用相对定位，里面的盒子用绝对定位，使之完全重合
（2）background-color的第四个参数是设背景颜色的透明度
（3）在鼠标没移上去之前，整个遮罩层的盒子透明度为0（不可见）
（4）鼠标移上去之后，遮罩层的盒子透明度为1（可见）
（5）transition：all 1s 使之有一个过渡的效果

二、div布局+css+js

1.html代码

<div class="a" id="a">
    <img src="img/page3_img1.jpg">
    <!--遮罩层开始-->
        <div class="b" id="b">
            <p>遮罩层</p>
        </div>
    <!--遮罩层结束-->
</div>

2.css样式

        .a{
            width: 300px;
            height: 218px;
            position: relative;
        }
        .b{
            width: 300px;
            height: 218px;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(101, 101, 101, 0.6);
            opacity: 0;
            transition: all 1s;
        }

3.js代码

var a=document.getElementById('a');
    var b=document.getElementById('b');
    a.function(){
        b.style.opacity='1';
    }
    a.function(){
        b.style.opacity='0';
    }

（1）.a的div使用了鼠标事件onmouseover：鼠标移上去.b的div的透明度变成1，出现了遮罩层
（2）.a的div使用了鼠标事件onmouseout：鼠标移走时.b的div的透明度变成0，遮罩层消失

两种方法的效果如下图
鼠标移上去之前：

鼠标移上去之后：