CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

mask是一个缩写属性名，其包含有：

1. mask-image
2. mask-size
3. mask-repeat
4. mask-position
5. mask-clip
6. mask-origin
7. mask-mode
8. mask-type
9. mask-composite
10. mask-border

其中mask-border是以下属性的缩写：

1. mask-border-mode
2. mask-border-outset
3. mask-border-repeat
4. mask-border-slice
5. mask-border-source
6. mask-border-width

注：以下示例所使用的图片

页面显示少女图片01.jpg 与心形遮罩图片heart.png

mask的大多属性与值与background都基本相似，只是一个是用于背景，一个是用于遮罩

mask-image

用于设置元素上遮罩层的图像, 是支持多个值的。

  <style>
    img{
      -webkit-mask-image: url(./heart.png);
      mask-image: url(./heart.png);
    }
  </style>
  <img src="./01.jpg" class="heart">

效果如下：

mask-size

定义了遮罩图像的大小和缩放方式,与background-size类似的。

关键字可选值有两个

mask-size: cover;
mask-size: contain;

cover: 把背景图像扩展至足够大，以使遮罩图像完全覆盖区域。遮罩图像的某些部分也许无法显示在区域中。

示例：

  <style>
    span{
      border: 1px solid #888;
      display: inline-block;
      font-size: 0.01px;
      line-height: 0;
    }
    img{
      width: 200px;
      height: 100px;
      -webkit-mask-image: url(./heart.png);
      -webkit-mask-size: cover;
    }
  </style>
  <span>
    <img src="./01.jpg" class="heart">
  </span>

效果：

contain： 把遮罩图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

  <style>
    span{
      border: 1px solid #888;
      display: inline-block;
      font-size: 0.01px;
      line-height: 0;
    }
    img{
      width: 200px;
      height: 100px;
      -webkit-mask-image: url(./heart.png);
      -webkit-mask-size: contain;
    }
  </style>
  <span>
    <img src="./01.jpg" class="heart">
  </span>

效果：

mask-size还有很多数值值：

mask-size: 50%;
mask-size: 3em;
mask-size: 12px;
mask-size: auto;

mask-size: 50% auto;
mask-size: 3em 25%;
mask-size: auto 6px;
mask-size: auto auto;

mask-repeat

定义了遮罩图片是否重复显示多个副本，以及如何重复

与background-repeat基本一样的，可选的值有

mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

以上值都可以双值来分别标明水平，垂直方向重复方式

mask-repeat: repeat space;
mask-repeat: repeat repeat;
mask-repeat: round space;
mask-repeat: no-repeat round;

如果mask-image是多个值，mask-repeat也可以对应的是多组值：

mask-repeat: space round, no-repeat;
mask-repeat: round repeat, space, repeat-x;

这里说下space,round两个值,与background-repeat是一样的，可能大家用的少单独说一下：

space: 表示遮罩图片尽可能的平铺同时不发生任何剪裁

round: 表示遮罩图片尽可能靠在一起没有任何间隙，同时不发生任何剪裁。这就意味着图片可能会有比例的缩放。

  <style>
    span{
      border: 1px solid #888;
      display: inline-block;
      font-size: 0.01px;
      line-height: 0;
    }
    img{
      width: 200px;
      height: 300px;
      -webkit-mask-image: url(./heart.png);
      -webkit-mask-repeat: round;
    }
  </style>
  <span>
    <img src="./01.jpg" class="heart">
  </span>

效果：

mask-position

参考background-position，没什么可讲的。

mask-clip

确定受遮罩影响的区域。元素的绘制内容必须限于此区域。

遮罩的盒模形，参与box-sizing

mask-clip: content-box;
mask-clip: padding-box;
mask-clip: border-box;
mask-clip: margin-box;
mask-clip: fill-box;
mask-clip: stroke-box;
mask-clip: view-box;

mask-origin

遮罩的原点位置

mask-origin: content-box;
mask-origin: padding-box;
mask-origin: border-box;
mask-origin: margin-box;
mask-origin: fill-box;
mask-origin: stroke-box;
mask-origin: view-box;

mask-mode，mask-type

这两个属性有些类似，都是定义遮罩模式的，只是mask-type只能作用于svg图像。

mask-mode支持下面3个属性值

mask-mode: alpha;
mask-mode: luminance;
mask-mode: match-source;

match-source 默认值，根据资源的类型自动采用合适的遮罩模式。

luminance 基于亮度遮罩

alpha 表示基于透明度遮罩

mask-composite

mask-composite表示当同时使用多个图片进行遮罩时候的混合方式。支持属性值包括：

下方4个值来自MDN文档

mask-composite: add;
mask-composite: subtract;
mask-composite: intersect;
mask-composite: exclude;

add 遮罩累加。

subtract 遮罩相减。也就是遮罩图片重合的地方不显示

intersect 遮罩相交。也就是遮罩图片重合的地方才显示

exclude 遮罩排除。也就是后面遮罩图片重合的地方排除，当作透明处理。

下方值来自Chrome调试工具

mask-composite:source-over;
mask-composite:source-in;
mask-composite:source-out;
mask-composite:source-atop;
mask-composite:destination-over;
mask-composite:destination-in;
mask-composite:destination-out;
mask-composite:destination-atop;
mask-composite:plus-lighter;
mask-composite:copy;
mask-composite:clear;
mask-composite:xor;

其值的定义可以参阅: https://www.canvasapi.cn/CanvasRenderingContext2D/globalCompositeOperation#&examples

mask-border

这个，，，暂时我还没弄明白，需要的可以自行参阅MDN： https://developer.mozilla.org/en-US/docs/Web/CSS/mask-border

差不多就这样了。

最后来个小动画吧

代码如下：

  <style>
    @keyframes anm {
      0%{
        -webkit-mask-position: 0 0;
      }
      50%{
        -webkit-mask-position: 100% 100%;
      }
      100%{
        -webkit-mask-position: 0 0;
      }
    }

    img{
      width: 200px;
      height: 200px;
      -webkit-mask-image: url(./heart.png);
      -webkit-mask-repeat: no-repeat;
      -webkit-mask-size: 100px;
      animation: anm 2s infinite ease;
    }
  </style>
  <img src="./01.jpg" class="heart">