借助 CSS 遮罩，您可以选择使用图片作为遮罩层。这意味着，您可以使用图片、SVG 或渐变色作为遮罩，无需图片编辑器即可制作有趣的效果。
使用 clip-path 属性剪裁元素后，剪裁区域会变为不可见。相反，如果您想使图片的某些部分不透明或对其应用其他效果，则需要使用遮罩。
本文介绍了如何在 CSS 中使用 mask-image 属性，该属性可让您指定要用作遮罩层的图片。您有以下三个选项。您可以使用图片文件作为遮罩、SVG 或渐变。
浏览器兼容性
虽然 CSS 遮罩是新推出的基准功能，但 mask-image 的大多数功能在使用前缀 -webkit-mask-image 的较低版本浏览器中也适用。以下示例展示了如何将这两个属性搭配使用，以获得最佳浏览器支持。
使用图片遮罩
mask-image 属性的运作方式与 background-image 属性类似。使用 url() 值传入图片。您的口罩图片需要包含透明或半透明区域。
完全透明的区域会导致该区域下方的图片部分不可见。不过，使用半透明区域可以让原始图片的部分内容透过来。您可以在以下 CodePen 中查看差异。
- 第一张图片是没有蒙版的气球原始图片。
- 第二张图片应用了遮罩，其中白色星星位于完全透明的背景上。
- 第三张图片的背景采用渐变透明度，上面有一个白色星形。
此示例还使用了值为 cover 的 mask-size 属性。此属性的运作方式与 background-size 相同。使用关键字 cover 和 contain，或使用任何有效的长度单位或百分比为背景设置尺寸。
您还可以像重复背景图片一样重复遮罩，以便将小图片用作重复图案。
使用 SVG 的遮罩
您可以使用 SVG，而不是使用图片文件作为遮罩。您可以通过以下几种方式实现此目的。第一种方法是在 SVG 中添加 <mask> 元素，并在 mask-image 属性中引用该元素的 ID。
.container img {
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
这种方法的优势在于，遮罩可以应用于任何 HTML 元素，而不仅仅是图片。
对于最常见的图片遮罩场景，您可以改为在 SVG 中添加图片。第一种方法是“新推出的基准”，即支持 -webkit 前缀版本的旧版浏览器支持 SVG 中的图片。
带有渐变的遮罩
使用 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;
通过对图片应用渐变图案，可以制作出一些非常棒的效果。通过分叉以下 CodePen 来测试一些其他变体。
除了剪裁之外，CSS 遮罩也是为图片和其他 HTML 元素增添趣味的一种方式，无需使用图形应用。