使用 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 中添加 <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 创办 拍摄。

阅读余下内容
 

《“使用 CSS 的 mask-image 属性对图片应用效果”》 有 1 条评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注


京ICP备12002735号