CSS Masking：使用图像、SVG和渐变创建遮罩效果

CSS 遮罩（masking）允许您使用图像作为遮罩层，这意味着您可以使用图像、SVG 或渐变作为遮罩，无需图像编辑器即可创建有趣的效果。

当使用 clip-path 属性裁剪元素时，被裁剪的区域会变为不可见。而如果您希望使图像部分区域变为半透明或应用其他效果，则需要使用遮罩技术。

本文将详细介绍 CSS 中的 mask-image 属性，该属性允许您指定用作遮罩层的图像。您有三种选择：使用图像文件、SVG 或渐变作为遮罩。

浏览器兼容性

虽然 CSS 遮罩被标记为 Baseline Newly available，但大多数 mask-image 的功能在早期浏览器版本中可通过带前缀的 -webkit-mask-image 使用。以下示例展示了如何同时使用这两个属性以获得最佳的浏览器支持。

使用图像作为遮罩

mask-image 属性的工作方式与 background-image 属性类似，使用 url() 值传入图像。

您的遮罩图像需要具有透明或半透明区域： - 完全透明的区域会使该区域下方的图像部分不可见 - 半透明区域则允许部分原始图像显示出来

以下示例展示了不同遮罩效果的区别：

.masked-image {
  mask-image: url(star.svg);
  -webkit-mask-image: url(star.svg);
  mask-size: cover;
  -webkit-mask-size: cover;
}

第一个图像是未应用遮罩的原始气球图像；第二个图像应用了在完全透明背景上有白色星星的遮罩；第三个图像应用了在渐变透明背景上有白色星星的遮罩。

此示例还使用了值为 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 中。第一种方法是 Baseline Newly available，而将图像包含在 SVG 中的方法在支持 -webkit 前缀版本的旧版浏览器中受支持。

使用渐变作为遮罩

使用 CSS 渐变作为遮罩是一种优雅的方法，无需创建图像或 SVG 即可实现遮罩区域。例如，使用线性渐变作为遮罩可以确保图像底部在标题下方不会太暗。

.gradient-mask {
  mask-image: linear-gradient(to bottom, transparent, black);
  -webkit-mask-image: linear-gradient(to bottom, transparent, black);
}

您可以使用任何支持的渐变类型，并发挥创意。下一个示例使用径向渐变创建圆形遮罩，在标题后面营造光照效果：

.radial-mask {
  mask-image: radial-gradient(circle, black 50%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, black 50%, transparent 70%);
}

多重遮罩

与背景图像一样，您可以指定多个遮罩源，将它们组合以获得所需的效果。当您想使用 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;

要将此图案或任何其他为背景图像设计的图案转换为遮罩，您需要用相关的遮罩属性（包括 -webkit 前缀版本）替换 background-* 属性：

-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;

通过将渐变图案应用于图像，可以创建出非常精美的效果。

与裁剪一起，CSS 遮罩是一种无需使用图形应用程序即可为图像和其他 HTML 元素增添趣味的方法。