html5实现遮罩效果的核心思路是通过定位让遮罩层覆盖在目标内容上方，再结合CSS样式控制遮罩的透明度、颜色或者形状，实现不同的视觉交互效果。常见的遮罩应用包括弹窗背后的半透明背景、图片上的渐变遮罩、点击区域的高亮提示等。
基础半透明遮罩实现
最基础的遮罩是一个覆盖全屏的半透明层，通常用于弹窗触发时的背景遮挡。实现步骤如下：
- 创建遮罩层元素，设置固定定位覆盖整个视口
- 设置背景色和透明度，避免影响下层内容的交互
- 通过显示隐藏控制遮罩的切换
下面是基础半透明遮罩的代码示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.mask {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 999;
}
.content {
width: 300px;
height: 200px;
background-color: white;
margin: 100px auto;
padding: 20px;
}
.btn {
margin-top: 20px;
padding: 8px 16px;
cursor: pointer;
}
</style>
</head>
<body>
<button class="btn" onclick="showMask()">显示遮罩</button>
<div class="mask" id="mask">
<div class="content">
这是遮罩层内的内容
<button class="btn" onclick="hideMask()">关闭遮罩</button>
</div>
</div>
<script>
function showMask() {
document.getElementById('mask').style.display = 'block';
}
function hideMask() {
document.getElementById('mask').style.display = 'none';
}
</script>
</body>
</html>
CSS3 mask属性实现形状遮罩
如果需要实现非矩形的遮罩效果，比如圆形、渐变形状的遮罩，可以使用CSS3的mask属性。该属性允许我们指定一个图像或者渐变作为遮罩，遮罩的透明部分会隐藏元素内容，不透明部分会显示元素内容。
下面是使用渐变实现图片渐变遮罩的示例：
/* 目标图片元素 */
.target-img {
width: 600px;
height: 400px;
background-image: url('https://ipipp.com/sample.jpg');
background-size: cover;
/* 设置线性渐变遮罩，从透明到黑色，左侧透明右侧不透明 */
-webkit-mask: linear-gradient(to right, transparent, black);
mask: linear-gradient(to right, transparent, black);
}
遮罩布局的注意事项
层级控制
遮罩层通常需要设置较高的z-index值，确保它覆盖在所有需要遮挡的内容上方，但如果有多个弹窗或者遮罩同时存在，需要合理规划层级顺序，避免层级冲突。
交互优化
如果遮罩需要支持点击关闭，要注意事件冒泡的问题，避免点击遮罩内的内容时触发遮罩关闭的逻辑。可以在遮罩层的点击事件中判断点击目标是否为遮罩本身，再做关闭操作。
示例代码如下：
// 给遮罩层绑定点击事件
document.getElementById('mask').addEventListener('click', function(e) {
// 如果点击的是遮罩本身，不是遮罩内的子元素，才关闭遮罩
if (e.target === this) {
this.style.display = 'none';
}
});
兼容性处理
CSS3的mask属性在部分旧版本浏览器中需要添加前缀，比如-webkit-mask，如果需要兼容旧浏览器，建议优先使用半透明定位遮罩的方案，兼容性更好。
| 遮罩方案 | 兼容性 | 适用场景 |
|---|---|---|
| 定位半透明遮罩 | 所有现代浏览器 | 弹窗背景、全屏遮挡 |
| CSS3 mask属性遮罩 | 现代浏览器，旧版需前缀 | 形状遮罩、渐变遮罩 |