使用 CSS 的 mask-image 属性对图片应用效果
当您使用 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() 值传入图片。 遮罩图片需要具有透明或半透明区域。
完全透明的区域会使图片下面的部分不可见。 使用半透明区域可以透过部分原始图片。 您可在下方查看 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 拍摄，由 Un 创办 拍摄。
555