
CSS
CSS实现:
1. 通过设置position: relative或position: ABSolute来使容器相对定位;

Java
3. 使用z-index属性来设置遮挡关系,使遮罩层在上面。
示例代码:
.contAIner {
position: relative;
}
.mask {
position: ABSolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.content {
position: relative;
z-index: 2;
}
JavaScript实现:
1. 创建一个新的div元素,设置其属性,使其显示在原有页面上方;
2. 通过CSS设置遮罩背景;
3. 在需要遮罩的元素上添加类名或ID,使用JavaScript获取该元素的位置和尺寸;
4. 使用JavaScript设置遮罩层的宽度、高度、位置等信息,使其与元素完全重叠。
示例代码:
function showMask(element) {
var mask = document.getElementById('mask');
mask.style.display = 'block';
mask.style.width = element.offsetWidth + 'px';
mask.style.height = element.offsetHeight + 'px';
mask.style.top = element.offsetTop + 'px';
mask.style.left = element.offsetLeft + 'px';
mask.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
}
function hideMask() {
var mask = document.getElementById('mask');
mask.style.display = 'none';
}
var contAIner = document.getElementById('contAIner');
showMask(contAIner);
Copyright © 2025 IZhiDa.com All Rights Reserved.
知答 版权所有 粤ICP备2023042255号