css遮罩mask
Mask 遮罩，就是原始图片只显示遮罩图片不透明部分。
兼容性
CSS Mask 属性还不是标准，暂时还处于推荐候选草案阶段，不过只要进入了推荐候选草案阶段，那么成为标准就只是时间问题了。可以放心使用。
Firefox 对 CSS Mask 全兼容，无需任何内核前缀，部分属性值与其他浏览器不一致需要注意。例如 mask-composite 取值与 Chrome 不一致。
IE 不支持 Mask 属性。
其他浏览器对 Mask 属性支持不完全，其中 webkit 内核浏览器需要使用 -webkit- 前缀。
简介
起初，mask 属性使用时只有自己本身，随着规范化，mask 属性成为了诸多 mask-* 属性的缩写，类似于 background、border 属性。
mask 属性列表：
- mask-image 遮罩图片
- mask-mode 遮罩图片的模式
- mask-position 遮罩图片的位置
- mask-size 遮罩的大小
- mask-repeat 遮罩图片重复性
- mask-clip 遮罩图片裁剪
- mask-origin 遮罩原点
- mask-type 遮罩类型
- mask-composite 遮罩组合方式
mask-image
mask-image 指遮罩使用的图片资源，类似 background-image，可支持多个值，默认值为 none，无遮罩图片。该属性支持各种图片资源：
- url() 功能符引入的静态图片资源，如 png、svg 等，很少用 jpg 图片遮罩，因为 jpg 完全不透明，最终效果和直接原图一致;
- CSS3 各类渐变绘制的图片;
- image() 、element() 等功能符，因兼容性不佳，不展开;
mask-mode
遮罩模式，默认值为 match-source，即根据资源类型自动使用合适的遮罩模式。例如遮罩使用 SVG 中的<mask>元素，此时的 match-source 计算值为 luminance，基于亮度遮罩。如果是其他情况，则计算值是 alpha，基于透明度遮罩。
mask-mode 可选值：
- luminance 亮度遮罩;
- alpha 透明度遮罩;
- match-source 根据资源自动选择前两种类型;
该属性仅 Firefox 支持，其他浏览器不支持。
mask-position
遮罩位置属性，与 background-position 支持的值和表现基本一致，默认值为0% 0%，相对左上角定位。Chrome 浏览器需要 -webkit 前缀。
mask-position 可选值：
- top、bottom、left、right、center 等关键字;
- 10%、10px、10rem 等各类数值;
双值表示两个轴向，多值对应表示多个遮罩图片。
mask-size
遮罩图片尺寸，与 background-size 类似，默认为 auto，Chrome 浏览器需要 -webkit 前缀。
mask-size 可选值：
- auto、contain、cover 等关键字;
- 10px、10%、10em 等各类数值;
双值表示两个轴向，多值对应表示多个遮罩图片。
mask-repeat
遮罩图片重复性，与 background-repeat 类似，默认值为 repeat，Chrome 浏览器需要 -webkit 前缀。
mask-repeat 可选值：
- repeat、repeat-x、repeat-y、space、round、no-repeat 等关键字;
双值表示两个轴向，多值对应表示多个遮罩图片。
mask-clip
遮罩裁剪属性，与 background-clip 类似，但 mask-clip 多了对 svg 元素的支持，默认值为 border-box。Chrome 浏览器需要 -webkit 前缀。
mask-clip 可选值：
- content-box、padding-box、border-box、margin-box、no-clip 等所有元素有效的关键字;
- fill-box、stroke-box、view-box 等仅 svg 元素有效的关键字;
多值对应表示多个遮罩图片。
mask-origin
遮罩源点属性，与 background-origin 类似，但 mask-origin 多了对 svg 元素的支持，默认值为 border-box。Chrome 浏览器需要 -webkit 前缀。
mask-clip 可选值：
- content-box、padding-box、border-box、margin-box、no-clip 等所有元素有效的关键字;
- fill-box、stroke-box、view-box 等仅 svg 元素有效的关键字;
多值对应表示多个遮罩图片。
mask-type
遮罩类型属性，功能上和 mask-mode 一致，都是设置遮罩模式，但 mask-type 仅对 svg 的<mask>元素有效，因此除 IE 外所有浏览器都兼容。默认值为 luminance。
mask-type 可选值：
- luminance 亮度遮罩;
- alpha 透明度遮罩;
mask-composite
遮罩混合属性，这个属性比较特殊，webkit 内核浏览器与 Firefox 浏览器取值完全不同。需要注意 mask-image 与 background-image 都支持多个图片，后书写的图片在底层，先书写的图片在顶层，因此，底层为 destination，顶层为 source。
这里很容易搞混，需要记住两个核心概念：
- css 中 background-image 或 mask-image 等属性，先定义的图片在上层，后加载，后定义的图片在下层，先加载。详见Image Sources: the background-image property。
- canvas 中，源图像（source）是指将要添加到画布中的图像，目标图像（destination）是指之前已经添加到画布中的图像。详见HTML canvas globalCompositeOperation Property - Definition and Usage。
结合这两个概念，就可以轻松得出：先书写的图片，在顶层，后加载，是源图像。后书写的图片，在底层，先加载，是目标图像。
下面所有示例中，红色为将要添加的图层 source，蓝色为已存在的图层 destination。
Firefox 浏览器，默认值为 add，可选值：
- add 表示遮罩相加，即 source（先书写的）在 destination（后书写的） 上叠加展示，相当于 webkit 支持属性中的 source-over;
- subtract 表示遮罩相减，即 source 与 destination 重合的地方不显示，仅保留其余部分的 source，相当于 webkit 支持属性中的 source-out;
- intersect 表示遮罩相交，即 source 与 destination 重合的地方才显示，相当于 webkit 支持属性中的 source-in;
- exclude 表示遮罩排除，即除 source 与 destination 重合以外的地方才显示，相当于 webkit 支持属性中的 xor;
webkit 内核浏览器，默认值为 source-over，借鉴了 Canvas 中的 globalCompositeOperation 属性值。可以参考CanvasRenderingContext2D.globalCompositeOperation，可选值：
- clear 清除 source 和 destination 重合区域，仅显示 destination 与 source 不重合部分，和 destination-out 行为一致;
- copy 用 source 替换 destination，即只显示 source;
- source-over 表示 source 叠加在 destination 上显示，与 firefox 中的 add 属性行为一致;
- source-in 表示仅显示在 destination 内的 source，即显示 source 与 destination 相交部分，注意显示主体为 source，与 firefox 中的 intersect 属性行为一致;
- source-out 表示仅显示在 destination 外的 source，即显示 source 与 destination 不重合的部分，与 firefox 中的 substract 属性行为一致;
- source-atop 表示在 destination 显示的基础上叠加显示 source 与 destination 重叠部分，注意重叠部分为 source;
- destination-over 表示 destination 叠加在 source 上显示;
- destination-in 表示仅显示在 source 内的 destination，即显示 destination 与 source 相交部分，注意显示主体为 destination;
- destination-out 表示仅显示在 source 外的 destination，即显示 destination 与 source 不重合部分;
- destination-atop 表示在 source 显示的基础上叠加显示 destination 与 source 重叠部分，注意重叠部分为 destination;
- xor 表示 source 与 destination 重合部分不显示，显示两者不重合的部分，与 firefox 中的 exclude 行为一致;
参考资料
客栈说书：CSS 遮罩 CSS3 mask/masks 详细介绍–张鑫旭
Image Sources: the background-image property–w3
CanvasRenderingContext2D.globalCompositeOperation–MDN
Is it okay to just alias -webkit-mask-composite to mask-composite?
Compositing mask layers: the mask-composite property–w3