css制作多层遮罩效果如何实现_使用position absolute和z-index叠加

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

css制作多层遮罩效果如何实现_使用position absolute和z-index叠加

2025-12-05

浏览次数：次

返回列表

使用CSS多层遮罩需先设置父容器为relative定位，内部遮罩层用absolute定位并重叠；通过z-index控制层级，数值大者在上；可结合背景图、渐变与半透明色块增强视觉效果；注意父容器尺寸、定位与层级管理，避免透明度叠加干扰颜色表现。

css制作多层遮罩效果如何实现_使用position 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）会显示在最上方，红色在最下。

Mistral AI

Mistral AI被称为“欧洲版的OpenAI”，也是目前欧洲最强的 LLM 大模型平台

182 查看详情 Mistral AI

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;
}

这样可以实现渐变+色彩双重遮罩，提升可读性和美感。