CSS 遮罩为您提供了使用图像作为遮罩层的选项。这意味着您可以使用图像、SVG 或渐变作为遮罩，无需图像编辑器即可创建有趣的效果。
当您裁剪元素使用 clip-path 属性时，裁剪区域将变为不可见。相反，如果您想使图像的一部分不透明或对其应用其他效果，则需要使用遮罩。这篇文章解释了如何使用 mask-image CSS 属性，它允许您指定要用作遮罩层的图像。这为您提供了三个选项。您可以使用图像文件作为遮罩、SVG 或渐变。
浏览器兼容性
虽然 CSS 遮罩是 Baseline Newly available，但大多数 mask-image 的功能在早期浏览器版本中使用前缀 -webkit-mask-image 也可用。以下示例展示了如何一起使用这两个属性以获得最佳浏览器支持。
使用图像遮罩
mask-image 属性的工作方式类似于 background-image 属性。使用 url() 值传入图像。您的遮罩图像需要具有透明或半透明区域。
完全透明的区域将导致该区域下方的图像部分不可见。但是，使用半透明区域将允许显示部分原始图像。您可以在以下 CodePen 中看到差异。
- 第一张图像是没有遮罩的气球原始图像。
- 第二张图像应用了遮罩，该遮罩在完全透明的背景上有一个白色星星。
- 第三张图像在具有渐变透明度的背景上有一个白色星星。
此示例还使用 mask-size 属性，值为 cover。此属性的工作方式与 background-size 相同。使用关键字 cover 和 contain 或使用任何有效的长度单位或百分比为背景设置大小。
您也可以重复遮罩，就像重复背景图像一样，以便使用小图像作为重复图案。
使用 SVG 遮罩
除了使用图像文件作为遮罩，您还可以使用 SVG。有几种方法可以实现这一点。第一种方法是在 SVG 内部有一个 <mask> 元素，并在 mask-image 属性中引用该元素的 ID。
.container img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
这种方法的优点是，遮罩可以应用于任何 HTML 元素，而不仅仅是图像。
对于遮罩图像的最常见情况，您可以改为将图像包含在 SVG 中。第一种方法是 Baseline Newly available，将图像包含在 SVG 中也受到支持 -webkit 前缀版本的旧版浏览器支持。
使用渐变遮罩
使用 CSS 渐变作为遮罩是一种实现遮罩区域的优雅方式，而无需费力创建图像或 SVG。
例如，用作遮罩的线性渐变可以确保图像的底部在标题下方不会太暗。
您可以使用任何受支持的渐变类型，并尽可能发挥创意。下一个示例使用径向渐变创建圆形遮罩，以照亮标题后面的区域。
多个遮罩
与背景图像一样，您可以指定多个遮罩源，将它们组合起来以获得所需的效果。如果您想使用 CSS 渐变生成的图案作为遮罩，这将特别有用。这些通常会使用多个背景图像，因此可以轻松转换为遮罩。
例如，在这个 CSS 渐变图案 中有一个棋盘格图案。使用背景图像的代码如下所示
background-image:
linear-gradient(45deg, #ccc 25%, transparent 25%),
linear-gradient(-45deg, #ccc 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, #ccc 75%),
linear-gradient(-45deg, transparent 75%, #ccc 75%);
background-size:20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
要将此或任何其他为背景图像设计的图案转换为遮罩，您需要替换 background-* 属性，并使用相关的 mask 属性，包括 -webkit 前缀的属性。
-webkit-mask-image:
linear-gradient(45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(-45deg, #000000 25%, rgba(0,0,0,0.2) 25%),
linear-gradient(45deg, rgba(0,0,0,0.2) 75%, #000000 75%),
linear-gradient(-45deg, rgba(0,0,0,0.2) 75%, #000000 75%);
-webkit-mask-size:20px 20px;
-webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
通过将渐变图案应用于图像，可以产生一些非常好的效果。通过 Fork 以下 CodePen 测试其他变体。
与裁剪一起，CSS 遮罩是一种为图像和其他 HTML 元素增加趣味性的方法，而无需使用图形应用程序。