这个属性可以将图形变成遮罩，可以理解为PhotoShop中的蒙版，黑色的部分会被保留，白色的部分会被遮盖，简称黑遮白显。

平常确实用不到这个属性，但是我在ANTFU的聊聊纯 CSS 图标这篇blog中看到了一种非常不错的方法。

# mask

可以通过这个属性来让图形一部分变成隐藏的区域。

# 示例

使用网格图片的遮罩

css
.mask {
  mask: url(/images/grid.svg);
}

# mask-mode

控制遮罩的模式。

# 示例

# alpha模式

css
.mask-mode-alpha {
  mask-mode: alpha;
}

# luminance模式

css
.mask-mode-luminance {
  mask-mode: luminance;
}

# mask-repeat

这个属性定义了遮罩的重复模式和background-repeat类似。

# mask-position

这个属性定义了遮罩的位置和background-position类似。

css
.mask-position {
  /* mask-position: 50% 50%; */
  mask-position: left top;
}

可以参考MDN

# mask-clip

这个属性用于指定蒙版图像应用于元素的哪些部分。

# 示例

我是一个文本。

css
.mask-clip-text {
  mask-clip: text;
}

# mask-origin

这个属性定义了遮罩的原点和background-origin类似。

# mask-size

这个属性定义了蒙版图像的大小，background-size类似。

css
.mask-size {
  /* mask-size: 100% 100%; */
  mask-size: cover;
}

具体信息请参考MDN

# mask-composite

这个属性定义了多个蒙版图像的合成模式。

# 示例

css
.mask-composite {
  mask-image: url("/images/grid.svg"), url("/images/金饰.png");
  mask-composite: exclude;
}