📜  CSS mask属性

📅  最后修改于: 2020-11-05 09:18:21             🧑  作者: Mango

CSS mask属性

CSS中的mask属性用于在特定点处使用剪辑或遮罩图像来隐藏元素。遮罩定义如何使用图像或图形元素作为亮度或Alpha遮罩。它是一种图形操作,可以完全或部分隐藏元素或对象的各个部分。

使用遮罩,可以显示或隐藏具有不同不透明度级别的图像部分。在CSS中,遮罩是通过使用mask-image属性来实现的,我们必须提供图像作为遮罩。

让我们用一些插图来了解它。

在此示例中,我们在图像元素上放置了一个蒙版。这里有两个特定的图像,我们在它们上应用蒙版,通过将整个蒙版图像放在一起,拉伸它们来构建最终图像。








Original Images

After masking

输出量

还有另一个例子,其中我们也使用图像进行遮罩。我们正在使用两个图像,其中一个是包含条纹的蒙版图像。

例2

这是在图像元素上放置遮罩的另一个示例。








Original Images

After masking

输出量

范例3

我们可以使用CSS渐变作为蒙版图像的来源。








输出量

例子4








输出量

例子4








输出量