DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 价值 200 美元的免费积分!
CSS 中的 mask
会隐藏应用于它的元素的一部分。
.element {
mask-image: url(star.svg);
}
假设您有一个元素,它具有照片背景和一个黑白 SVG 图形,要用作遮罩,如下所示

您可以将图像设置为同一个元素上的 background-image
,将遮罩设置为 mask-image
,然后得到类似这样的效果
遮罩与背景有很多共同点,您可以像背景一样调整遮罩的大小、定位它们以及重复它们等等。 请参阅下面的相关属性。 但遮罩与背景还有一个有趣的共同点:它们可以是渐变。
这是同一个背景图形,只是用一个 linear-gradient
遮罩覆盖它,这使得顶部是透明的,底部逐渐过渡为完全不透明
这之所以有效,是因为 linear-gradient
的顶部是 transparent
。 我原以为如果它是 white
并且 mask-type
是 luminance
,它也能正常工作,但在我使用的任何浏览器中,这似乎都不起作用。
说到 luminance
遮罩,这似乎不适用于像 JPG 或 PNG 这样的光栅格式的图像作为遮罩。 **更新**:读者 Micheal Hall 提供了一个演示,其中可能与使用长格式属性有关。 如果您只使用速记语法,Firefox 似乎支持此概念。
但 Alpha 遮罩似乎可以正常工作。 正如使用实际 Alpha 透明度的光栅图形一样。 像这样

只是为了证明这一点,您可以看到一个颜色动画,它可以通过遮罩看到
mask-image
属性也可以直接用于 SVG 元素内部。 比如,看看这个椭圆形遮罩,它还具有模糊过滤器
看起来您可以获取该 SVG 遮罩并使用 mask-image: url(#mask);
应用于其他元素,但我发现实际上并不起作用。 它只在 SVG 内部有效,并且在 SVG 外部使用时会产生一个不好的副作用,即完全擦除图像。
浏览器支持
此浏览器支持数据来自 Caniuse,它提供了更多详细信息。 数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
120 | 53 | 否 | 120 | 15.4 |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 15.4 |