Mask Image

定义

Mask Image指用一幅选定的图形或图像去遮挡待处理图像的全部或局部，从而限定处理区域或处理过程的技术手段，被用来覆盖的那幅特定图像或图形即称为掩膜或模板^[1]。在光学图像处理中，掩膜可以是胶片、滤光片等实体介质；在数字图像处理中，它通常表现为二维矩阵数组，有时也使用取值多于两档的多值图像^[1]。

同一术语在不同语境下所指略有差别：作为数据时它是一张与源图像空间位置对应的标记图，作为操作时它指按这张标记图保留或屏蔽像素的过程。在网页领域，CSS 的 mask-image 属性把一幅图像、SVG 图形或渐变声明为元素的蒙版层，用其 alpha 通道（部分情况下还有颜色亮度）决定元素各部分的可见程度^[2]。图像掩膜的概念借鉴于半导体制造中的光刻掩膜：在硅片上用不透明图形模板遮盖，使后续腐蚀或扩散只作用于选定区域之外。

原理

数字掩膜的核心运算是逐像素的相乘与阈值判断。设源图像为 $I(x,y)$，掩膜为 $M(x,y)$，则在感兴趣区保留、区外置零的操作为 $I'(x,y)=I(x,y)\cdot M(x,y)$；当 $M$ 仅取 0 与 1 时即得到二值掩膜图像，区外像素值全部为 0，区内保持原值。取值位于 0 与 1 之间的多值掩膜则相当于按权重混合，可实现半透明与柔和边缘。

在分割类模型中，掩膜既可以是输出，也可以是监督信号。以 Mask R-CNN 这一类方法为例，网络在检测框分支之外并联一条掩膜预测分支，为每个目标实例输出一张高质量分割掩膜^[3]。更一般地，掩膜分类架构通过预测 N 张二值掩膜及其对应的类别标签，把像素分组为 N 个区域段，不同任务只是给这些区域段赋予不同的语义^[4]。生成二值掩膜时常用白色像素(255)表示目标区域、黑色像素(0)表示背景，输出尺寸与原图一致^[5]。

网页端的实现采用类似的叠加思路，其流程图如下：

flowchart LR

A[被遮罩元素] --> C{蒙版层与元素合成}

B[mask-image 图像 / SVG / 渐变] --> C

C -->|不透明处| D[元素可见]

C -->|透明处| E[元素隐藏]

C -->|半透明处| F[元素半透明]

CSS 遮罩默认把蒙版图像的 alpha 通道与元素自身的 alpha 通道相乘，也可通过 mask-mode 改为按亮度计算；蒙版中不透明的部分显示元素，透明的部分隐藏元素，半透明部分则使元素同等程度地半透明^[2][6]。

发展历程

掩膜的思想源头可追溯到半导体光刻工艺，其中用于图形转移的“底片”被称为掩膜，之后这一思路被引入数字图像处理。在经典数字图像处理阶段，掩膜主要以人工绘制的模板、感兴趣区掩膜的形式出现，用于提取感兴趣区、屏蔽区域、结构特征提取以及特殊形状图像的制作。

2017 年，Mask R-CNN 被提出并在 ICCV 2017 上发表，它扩展 Faster R-CNN，增加与边界框识别分支并行的掩膜预测分支，在检测目标的同时为每个实例生成分割掩膜^[3]。此后掩膜分类逐渐成为统一分割任务的通用范式，MaskFormer 等工作表明基于集合预测的掩膜分类可同时适用于全景分割与语义分割^[4]。

网页端方面，CSS 遮罩能力早期多依赖带前缀的实现，CSS Masking 规范草案中已定义 mask-image、mask-clip、mask-size、mask-composite 等相关属性^[7]。据 MDN 记录，mask-image 自 2023 年 12 月起在主流浏览器中得到支持，成为基线可用特性^[2]。

应用

在遥感与测绘中，掩膜被用于提取道路、河流、房屋等目标：以 n×n 矩阵对图像像素进行过滤，突出所需地物或标志。在图像编辑、游戏开发、医学图像修正以及视频内容替换与融合等场景中，掩膜同样用于限定修改作用的范围^[1]。

在算法侧，Mask R-CNN 输出的逐实例掩膜可用于实例分割，其框架也可推广到人体姿态估计等任务^[3]。在高分辨率精细分割中，掩膜还被用于合成训练数据：先对既有真值掩膜做刚性与非刚性编辑，再以掩膜及其提取的边缘为条件生成对应图像，构成图像—掩膜配对样本^[8]。网页设计中，开发者可用 PNG 位图、SVG 的 mask 元素或 CSS 渐变作为 mask-image，实现星形镂空、圆形柔边、底部长渐变淡出等效果，并可叠加多个蒙版层^[2][9]。

硬件与工程测试中也有同类用法。例如 DisplayPort 眼图测试使用中心菱形区域的掩模，若测试图形落入菱形以内即判定为不合格^[1]。

局限

掩膜只描述空间位置上的取舍，本身不携带语义。同一张二值掩膜无法区分两个相互重叠的同类别对象，因此实例级分割需要为每个实例单独输出掩膜^[4]。二值掩膜在边界处也缺乏过渡信息，边缘容易呈锯齿状；为表达像素属于目标的程度，需要额外的置信掩膜或经滤波处理的多值掩膜^[10]。

掩膜的质量高度依赖标注与模型精度。精细分割任务中，基于伪标签增广的数据常带来伪影，而常规图像编辑方法又可能破坏二值掩膜的拓扑结构，造成目标区域断裂或重叠^[8]。在高分辨率场景下，捕捉极细结构仍是现有方法需要专门设计加以改善的问题^[11]。

工程实现上也有若干限制。CSS 的 mask-image 属于离散动画类型，不能平滑插值过渡；受跨域策略约束，仅接受经 HTTP 与 HTTPS 提供的图像源，本地 file:// 路径的图像会被当作透明黑层而不显示^[2]。当蒙版图像为空、下载失败、格式不受支持或路径无效时，同样按透明黑层处理，不产生可见的遮罩效果^[2]。此外，若只设一个 none 值则不产生遮罩，多值列表中出现的 none 也会使该层视觉上无效^[2]。

参见

• 图像分割 —— 将图像划分为若干区域的任务，其输出常以掩膜形式给出。

• Mask R-CNN —— 在检测框架上并联掩膜分支的实例分割方法。

• CSS —— mask-image 等遮罩属性所属的样式语言。

• SVG —— 其 mask 元素可作为网页遮罩的图像源。

• 感兴趣区 —— 掩膜在数字图像处理中最常见的用途之一。

• 光刻 —— 掩膜概念在半导体制造中的来源。