借助 CSS 遮罩，您可以选择将图片用作遮罩层。这意味着，即使没有图片编辑器，您也可以使用图片、SVG 或渐变色作为遮罩，从而创建出有趣的效果。
当您使用 clip-path 属性裁剪元素时，裁剪区域将变为不可见。
如果您希望图片的一部分不透明或应用一些其他效果，则需要使用遮罩。这篇博文将介绍如何在 CSS 中使用 mask-image 属性，该属性可让您指定要用作遮罩层的图片。这为您提供三个选项。您可以将图片文件用作遮罩、SVG 或渐变。
浏览器兼容性
大多数浏览器对标准 CSS 遮盖属性仅提供部分支持。除了标准属性之外，您还需要使用 -webkit- 前缀，以实现最佳的浏览器兼容性。如需了解完整的浏览器支持信息，请参阅我可以使用 CSS 掩码吗？。
虽然使用带前缀属性的浏览器支持是很好的做法，但当使用遮盖功能使图片上的文本可见时，请注意遮盖不可用时会发生什么情况。在添加遮盖版本之前，不妨使用功能查询来检测对 mask-image 或 -webkit-mask-image 的支持，并提供可读的回退。
@supports(-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
/* code that requires mask-image here. */
}
使用图片遮盖
mask-image 属性的工作方式与 background-image 属性类似。使用 url() 值传入图片。蒙版图片必须具有透明或半透明区域。
完全透明的区域会使该区域下方的图片部分不可见。 不过，使用半透明区域可让部分原始图片透出来。 您可以在下方的“故障效果”中查看不同之处。 第一张图片是不含遮罩的气球的原始图片。第二张图片的蒙版已应用，在完全透明的背景上有一个白色星星。 第三张图片的背景为带有渐变透明度的白色星星。
在此示例中，我还使用了值为 cover 的 mask-size 属性。此属性的工作方式与 background-size 相同。您可以使用关键字 cover 和 contain，也可以使用任何有效的长度单位或百分比为背景指定尺寸。
此外，与重复背景图片一样，您也可以重复遮罩，以便将小图片用作重复图案。
使用 SVG 进行遮盖
您可以使用 SVG，而不是使用图片文件作为遮罩。可以通过多种方法实现此目的。
第一种方法是在 SVG 内添加 <mask> 元素，并在 mask-image 属性中引用该元素的 ID。
<svg width="0" height="0" viewBox="0 0 400 300">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="400" height="300"></rect>
<circle fill="#FFFFFF" cx="150" cy="150" r="100" />
<circle fill="#FFFFFF" cx="50" cy="50" r="150" />
</mask>
</defs>
</svg>
<div class="container">
<img src="balloons.jpg" alt="Balloons">
</div>
.container img {
height: 100%;
width: 100%;
object-fit: cover;
-webkit-mask-image: url(#mask);
mask-image: url(#mask);
}
这种方法的优势在于，蒙版可以应用于任何 HTML 元素，而不仅仅是图片。 很遗憾，Firefox 是唯一支持这种做法的浏览器。
不过，所有信息都不会丢失，因为对于遮盖图片的最常见场景，我们可以将图片包含在 SVG 中。
使用渐变遮盖
使用 CSS 渐变作为蒙版是一种很好的方法，可以实现遮盖区域，而无需费心创建图片或 SVG。
例如，使用简单的线性渐变作为蒙版可以确保图片的底部不会太过深在图片说明下。
您可以使用任何受支持的渐变类型，并尽情发挥创意。 接下来的这个示例使用径向渐变创建一个圆形蒙版，用于照亮图片说明。
使用多个蒙版
与背景图片一样，您可以指定多个遮罩来源，将它们组合在一起以获得所需的效果。如果您想使用通过 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;
通过对图像应用渐变模式，可以实现一些非常好的效果。不妨尝试对 Glitch 进行混剪，并尝试一些其他变化形式。
除了裁剪，CSS 蒙版也能让您对图片和其他 HTML 元素产生兴趣，而无需使用图形应用。
照片由 Julio Rionaldo 在 Unsplash 上提供。