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;css鼠标点击样式
}
.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 ElementById('a');
var ElementById('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，遮罩层消失
两种⽅法的效果如下图
⿏标移上去之前：
⿏标移上去之后：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。