页面遮罩功能各种实现

怪咖学生

已于 2024-11-20 03:51:09 修改

阅读量3.4k

点赞数 87

文章标签： css

于 2024-11-18 04:38:27 首次发布

本文链接：https://blog.csdn.net/lixin5456985/article/details/143842334

版权

在网页开发中，蒙版（Mask）是一种常见的设计元素，用于模糊背景、聚焦用户注意力或添加装饰效果。以下是创建页面蒙版的常用方法。

蒙版实现方法总览

方法	核心技术	特点	应用场景
CSS 背景色 + 半透明遮罩	CSS `background`	简单易用，兼容性高	弹窗、模态框、焦点区域强调
CSS `mask` 或 `clip-path`	CSS 图形裁剪与蒙版	提供复杂的图形裁剪和渐变效果	图形特效、动画
伪元素遮罩	CSS 伪元素	使用伪元素独立绘制遮罩，不干扰主元素	动态背景遮罩、局部遮罩
Canvas 蒙版	HTML Canvas	高度自定义，支持复杂图形	动态蒙版、复杂几何图案
SVG 蒙版	SVG `mask` 与渐变	支持矢量化设计，灵活度高	图形遮罩、交互动画
JavaScript 动态控制	JS 操作 DOM 或 CSS	配合动态效果，适用于需要实时变化的蒙版	动态生成模态框、可交互的遮罩

详细说明与代码示例

1. CSS 背景色 + 半透明遮罩

描述：

通过 CSS 的背景色设置透明度，覆盖整个页面实现遮罩效果。

代码示例：

<div class="overlay"></div>

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑色 */
  z-index: 1000;
}

特点：

实现简单，兼容性高。
可通过 z-index 控制层级关系。

适用场景：

模态框、弹窗背景遮罩。

2. CSS `mask` 或 `clip-path`

描述：

使用 CSS 的 mask 或 clip-path 属性裁剪或隐藏部分元素。

代码示例（mask 实现圆形蒙版）：

<div class="masked"></div>

.masked {
  width: 100px;
  height: 100px;
  background: url('image.jpg') no-repeat center;
  -webkit-mask: radial-gradient(circle, transparent 50%, black 50%);
  mask: radial-gradient(circle, transparent 50%, black 50%);
}

代码示例（clip-path 裁剪区域）：

.clip-box {
  width: 200px;
  height: 200px;
  background: red;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}

特点：

适合复杂几何裁剪。
mask 支持渐变和多层效果。

适用场景：

图形特效、复杂动画。

3. CSS 伪元素遮罩

描述：

使用伪元素 ::before 或 ::after 创建遮罩。

代码示例：

<div class="content">内容</div>

.content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  pointer-events: none; /* 遮罩不影响用户交互 */
}

特点：

遮罩层与主元素逻辑分离。
可动态调整显示/隐藏。

适用场景：

局部遮罩、动态背景遮罩。

4. Canvas 蒙版

描述：

通过 HTML5 Canvas 绘制遮罩，支持复杂的自定义图形和动画。

代码示例：

<canvas id="maskCanvas"></canvas>

const canvas = document.getElementById('maskCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

// 绘制蒙版
ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 创建透明区域
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(150, 150, 50, 0, Math.PI * 2);
ctx.fill();

特点：

高度自定义，适合复杂图形。
支持动态更新。

适用场景：

游戏界面、复杂动态效果。

5. SVG 蒙版

描述：

使用 SVG 的 mask 或 clipPath 创建矢量化的遮罩。

代码示例：

<svg width="200" height="200">
  <defs>
    <mask id="mask1">
      <rect width="100%" height="100%" fill="white" />
      <circle cx="100" cy="100" r="50" fill="black" />
    </mask>
  </defs>
  <rect width="100%" height="100%" fill="blue" mask="url(#mask1)" />
</svg>

特点：

矢量化设计，支持高分辨率。
可与 CSS 动画结合。

适用场景：

矢量特效、动画场景。

6. JavaScript 动态控制

描述：

通过 JavaScript 操作 DOM 或样式，实现动态生成和移除遮罩。

代码示例：

function createOverlay() {
  const overlay = document.createElement('div');
  overlay.style.position = 'fixed';
  overlay.style.top = 0;
  overlay.style.left = 0;
  overlay.style.width = '100vw';
  overlay.style.height = '100vh';
  overlay.style.background = 'rgba(0, 0, 0, 0.5)';
  overlay.style.zIndex = 1000;
  document.body.appendChild(overlay);
}

// 调用函数生成遮罩
createOverlay();

特点：

可动态生成和移除。
适合实时交互。

适用场景：

弹窗背景、可交互的遮罩。

不同方法对比

方法	实现复杂度	性能	适用范围
背景色遮罩	简单	高	弹窗、简单遮罩
CSS `mask`/`clip-path`	中等	高	图形裁剪、复杂动画
伪元素遮罩	简单	高	局部遮罩
Canvas 蒙版	高	中	动态图形效果
SVG 蒙版	中	高	矢量图形、动画
JavaScript 动态控制	中等	中	动态界面效果