一、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，遮罩层消失
两种方法的效果如下图
鼠标移上去之前：
鼠标移上去之后：
