借助 CSS 遮罩,您可以选择将图片用作遮罩层。这意味着,您可以使用图片、SVG 或渐变效果作为蒙版,在不使用图片编辑器的情况下制作有趣的效果。
当您使用 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);
}
![SVG 蒙版使用示例](https://web.dev/static/articles/css-masking/image/an-example-using-svg-ma.jpg?authuser=7&hl=zh-cn)
这种方法的优势在于,可以将遮罩应用于任何 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 创办 拍摄。