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

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

P粉602998670

发布： 2025-12-05 13:56:02

原创

330人浏览过

使用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 值，决定哪个遮罩显示在最上层。数值越大，层级越高。

立即学习“前端免费学习笔记（深入）”；

Dreamina

字节跳动推出的AI绘画工具，用简单的文案创作精美的图片

449

查看详情

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

登录后复制

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