使用 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() 值传入图片。您的口罩图片需要包含透明或半透明区域。

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

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