使用CSS多层遮罩需先设置父容器为relative定位，内部遮罩层用absolute定位并重叠；通过z-index控制层级，数值大者在上；可结合背景图、渐变与半透明色块增强视觉效果；注意父容器尺寸、定位与层级管理，避免透明度叠加干扰颜色表现。
使用CSS实现多层遮罩效果，核心是通过 position: absolute 将多个遮罩层定位在相同位置，并利用 z-index 控制它们的堆叠顺序。这种方式常用于图片叠加、文字遮挡、视觉特效或模态框背景等场景。
1. 基本结构与定位
将容器设为相对定位（position: relative），内部的遮罩层使用绝对定位（position: absolute），这样它们会相对于容器进行定位，可以完全重叠。
<div class="container"> <div class="mask mask1"></div> <div class="mask mask2"></div> <div class="mask mask3"></div> </div>
CSS设置：
.container {
position: relative;
width: 300px;
height: 200px;
overflow: hidden;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
2. 使用z-index控制层级
通过设置不同的 z-index 值，决定哪个遮罩显示在最上层。数值越大，层级越高。
立即学习“前端免费学习笔记（深入）”；
.mask1 {
background: rgba(255, 0, 0, 0.5);
z-index: 1;
}
.mask2 {
background: rgba(0, 255, 0, 0.5);
z-index: 2;
}
.mask3 {
background: rgba(0, 0, 255, 0.5);
z-index: 3;
}
此时，蓝色遮罩（mask3）会显示在最上方，红色在最下。
3. 结合背景图或内容使用
实际应用中，底层通常是图片或内容，上面叠加多个半透明遮罩层增强视觉效果。
.container {
position: relative;
width: 300px;
height: 200px;
background: url('image.jpg') no-repeat center / cover;
}
.mask-gradient {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: linear-gradient(45deg, transparent, rgba(0,0,0,0.6));
z-index: 2;
}
.mask-solid {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
background: rgba(255, 100, 0, 0.2);
z-index: 1;
}
这样可以实现渐变+色彩双重遮罩，提升可读性和美感。
4. 注意事项
确保父容器有明确尺寸并启用相对定位，否则绝对定位元素无法正确对齐。同时，z-index 只在定位元素（relative、absolute、fixed）上生效。
- 所有遮罩必须设置 position: absolute
- 合理分配 z-index 数值，避免层级混乱
- 透明度叠加可能影响最终颜色表现，建议使用 RGBA 调整透明度
- 测试不同屏幕尺寸下的覆盖效果，必要时配合媒体查询
