CSS mask 属性

mask 是 CSS 中用于添加遮罩效果的属性。

语法

mask:       <mask-reference>
         || <position> [ / <bg-size> ]? [ , <position> [ / <bg-size> ]? ]*  
         || none 
         || initial
         || inherit;

• <mask-reference>：指定一个 <mask-source> 或 <mask-layer> 或 <mask-reference>。
• <position>：指定遮罩的起始位置，默认是 0% 0%。
• <bg-size>：指定遮罩的尺寸，默认是 auto.

相关属性

与 mask 相关的其他属性有：

• mask-type：指定遮罩类型，可选值为 alpha（使用遮罩的 alpha 通道），luminance（使用遮罩的亮度信息）
• mask-source-type：指定 <mask-source> 的类型，可选值为 url（通过 URL 引入）或 element（使用某个元素作为遮罩）
• mask-image：指定用于遮罩的图片
• mask-mode：指定遮罩模式，可选值为 alpha、luminance 或 match-source（使用图片的默认模式）

示例

以下示例演示了如何添加遮罩效果:

.section {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

.section img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask: linear-gradient(to bottom, transparent 0, black);
}

该示例中，在一个宽高为 300px 的容器中，使用了一张图片和一个遮罩。遮罩使用了一个线性渐变（从透明到黑色），并通过 mask 属性实现了遮盖效果。效果如下图所示：