如何使用 CSS 为图像添加遮罩？

CSS 中的mask-image属性用于设置图像或文本的掩码。它用于为特定元素形成遮罩层。您可以使用 CSS 中的 mask-image 属性为图像添加遮罩。在本文中，您将了解 mask-image 属性的不同属性值及其不同用途。

句法：

mask-image: none |  |  | inherit | initial | unset

适当的价值：

• none：不设置遮罩层，设置透明黑色层。
• ：用于给出图像 URL 的来源。
• ：使用线性渐变作为蒙版图像。
• 继承：继承父级的掩码属性。
• 初始：应用属性的默认设置，即匹配源。
• unset：从元素中丢弃当前的掩码属性。

示例 1：使用属性值。

句法：

mask-image: url();

HTML

输出：

示例 2：使用属性值。

句法：

mask-image: linear-gradient();

注意：如果图像蒙版中有 100% 黑色，则图像将完全可见，任何 100% 透明的内容都将被完全隐藏，介于 (0-100) 之间的任何内容都会部分遮住图像。

HTML

输出：