使用 CSS 的遮罩图片属性对图片应用效果

借助 CSS 遮罩，您可以选择将图片用作遮罩层。这意味着，您可以使用图片、SVG 或渐变色作为遮罩，无需图片编辑器即可制作有趣的效果。

Rachel Andrew

使用 clip-path 属性剪裁元素后，剪裁区域会变为不可见。相反，如果您想使图片的某些部分不透明或对其应用其他效果，则需要使用遮罩。 本文介绍了如何在 CSS 中使用 mask-image 属性，该属性可让您指定要用作遮罩层的图片。您有以下三个选项。您可以将图片文件用作遮罩、SVG 或渐变。

浏览器兼容性

大多数浏览器仅对标准 CSS 遮盖属性提供部分支持。 为了实现最佳的浏览器兼容性，您需要使用标准属性以及 -webkit- 前缀。如需了解完整的浏览器支持信息，请参阅我可以使用 CSS 遮罩吗？。

浏览器支持

• 120
• 120
• 53
• 15.4

来源

虽然使用带前缀的属性的浏览器支持很好，但在使用遮罩来使图片上方的文本可见时，请注意如果无法使用遮罩会发生什么情况。在添加经过脱敏处理的版本之前，不妨使用功能查询来检测对 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() 值传入图片。您的口罩图片需要包含透明或半透明区域。

完全透明的区域会导致该区域下方的图片部分不可见。不过，使用半透明区域可以让原始图片的部分内容透过来。您可以在下面的 Glitch 中查看差异。 第一个图片是没有蒙版的气球原始图片。 第二张图片应用了遮罩，其中白色星星位于完全透明的背景上。 第三张图片的背景采用了渐变透明度，上面有一个白色星形。

在此示例中，我还使用了值为 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。