我们介绍了使用CSS 进行剪辑时的clip-path属性的使用，因此我们现在讨论遮罩是很自然的。与剪裁相反，在剪裁中，图像或元素的一部分要么完全不可见，要么完全可见，通过遮罩，我们可以隐藏或显示具有不同不透明度级别的图像部分。

CSS 中的遮罩是使用mask-image属性完成的，并且必须提供图像作为遮罩。图像蒙版中 100% 黑色的任何内容都完全可见，任何 100% 透明的内容都将被完全隐藏，中间的任何内容都会部分遮住图像。CSS 中的线性和径向渐变是生成的图像，因此它们可以用作图像蒙版。使用遮罩元素的SVG也可以用作图像遮罩。让我们用具体的例子来看看图像蒙版的 3 种可能性：

使用渐变遮罩

让我们首先使用一个从透明到黑色的简单线性渐变。第一张图像是我们的默认起始图像，第二张图像应用了我们的线性渐变作为掩码图像值：

这是此处使用的 CSS 规则：

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

下面是两个有趣的效果示例，可以通过使用渐变进行遮罩来实现这些效果：

以及这两个渐变蒙版的 CSS 规则：

.mask2 {
  -webkit-mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
  mask-image: radial-gradient(circle at 50% 60%, black 50%, rgba(0, 0, 0, 0.6) 50%);
}
.mask3 {
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
  mask-image: radial-gradient(ellipse 90% 80% at 48% 78%, black 40%, transparent 50%);
}

使用图像进行掩蔽

这是我们使用使用 Sketch 创建的图像作为我们的图像蒙版。第一个图像是图像蒙版本身，第二个图像应用了该蒙版：

我们的 CSS 看起来像这样：

.mask4 {
  -webkit-mask-image: url("/path/to/image-mask.png");
  mask-image: url("/path/to/image-mask.png");
  -webkit-mask-size: 400px 600px;
  mask-size: 400px 600px;
}

我们在这里为mask-size指定了一个值，因为我们的图像遮罩是800px x 1200px，但在这里我们希望所有东西都缩小一半，以便图像在视网膜显示器上看起来很清晰。

使用 SVG 蒙版进行蒙版

最后，如果 SVG 是您的最佳选择，您可以使用 SVG mask元素定义图像遮罩。

第一个示例目前似乎只适用于 Firefox（您可能在不支持的浏览器中看不到任何内容）。它定义了 SVG掩码，然后我们像往常一样在 CSS 中引用掩码的 ID。第二个示例似乎有更广泛的支持，并将图像定义为 SVG 元素本身的一部分。

另请注意，对于 SVG 蒙版，要使用的颜色是白色和黑色，而不是透明和黑色。颜色也可以反向工作，白色/部分白色是可见的。

示例 1（三角形）

这是第一个示例的 SVG 标记：

<svg width="0" height="0" viewBox="0 0 400 600">
  <defs>
    <mask id="my-svg-mask">
      <rect fill="#000000" x="0" y="0" width="400" height="600"></rect>
      <polygon fill="#FFFFFF" points="200.5 152 349 449 52 449"></polygon>
    </mask>
  </defs>
</svg>

然后我们就可以敷面膜我们与图像掩码图像由refecencing的SVG面具的ID和往常一样：

.mask5 {
  -webkit-mask-image: url(#my-svg-mask);
  mask-image: url(#my-svg-mask);
}

示例 2（气泡）

对于我们的第二个 SVG 示例，所有内容都包含在 SVG 定义中，包括我们的主图像本身：

<svg width="400px" height="600px" viewBox="0 0 400 600">
  <defs>
    <mask id="my-svg-mask2">
      <rect id="Rectangle" fill="#000000" x="0" y="0" width="400" height="600"></rect>
      <circle id="Oval" fill="#FFFFFF" cx="67.5" cy="51.5" r="67.5"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="296.597656" cy="118.597656" r="56.5976562"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="53.4648437" cy="256.464844" r="81.4648437"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="239.587891" cy="313.587891" r="70.5878906"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="366.597656" cy="562.597656" r="56.5976562"></circle>
      <circle id="Oval" fill="#FFFFFF" cx="93.203125" cy="486.203125" r="76.203125"></circle>
    </mask>
  </defs>
  <image mask="url(#my-svg-mask2)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/images/css/masking/masking-example1.jpg" width="400" height="600"></image>
</svg>