朋友，你听说过 CSS3 Mask 这个属性吗？
没听说过？不是很了解？
没关系，听我娓娓道来。

1. Mask 介绍

css遮罩是2008年4月由苹果公司添加到webkit引擎中的。遮罩提供一种基于像素级别的，可以控制元素透明度的能力，类似于png24位或png32位中的alpha透明通道的效果。

2012年11月15号，遮罩第一次出现在W3C公布的草案中。但是跟苹果公司的是不同的版本。

摘录自: http://www.w3cplus.com/css3/css-masking.html

当前（2016.10.19）mask 处于 候选标准阶段（CR），还不是正式标准（REC），webkit/blink 内核加前缀 -webkit- 可使用。

1.1 Mask 的兼容性

以下是来自 caniuse的统计：

caniuse

ie/edge 全面不支持，Android 和 iOS Safari 阵营几乎全线飘浅绿，意味着支持部分功能 。不过，Android 4.0 及以下版本的对 mask 的兼容性并不友好！多亏了近几年智能手机市场的良(e)性竞争，给移动前端制造了一个相对良好的环境，以下是 Android 各版本的市场占用率：

安卓各版本市场占有率

Android 4.0 以下版本的占有率不足 5%，已不在主流测试机型内可以忽略不计。

1.2 Mask 的原理

蒙板可以是 CSS3 渐变或者半透明的PNG图片，蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容。如下：

mask 原理

1.3 Mask 的发展

到目前为止，mask 在 W3C 上一共有6个版本（5个草案+1候选标准）,如下：

当前 -webkit-mask 的标准基本上等同于第一个WD（草案）。（有理由相信『W3C Working Draft 15 November 2012』参考了 webkit.org 的 『 CSS Masks』）

1.4 Mask 语法

Definitions of CSS properties and values in this specification are analogous to definitions in CSS Backgrounds and Borders [CSS3BG].

摘录自: https://www.w3.org/TR/css-masking-1/#terminology

按 W3C 官网的说法，mask 的语法与 background 是相仿的。以下是 mask 与 background 属性的对照表：

mask background
mask-clip background-clip
*mask-composite -
mask-image background-image
*mask-mode -
mask-origin background-origin
mask-position background-position
mask-repeat background-repeat
mask-size background-size
- background-attachment
- background-color

上表中，mask 与 background 对应的六个属性在 webkit/blink 内核都能完全支持，并且与W3C的标准保持一致，语法与 background 相通。background 的语法不赘述。

1.4.1 mask-mode 与 mask-composite：
1.4.2 mask 语法简写

以下是 W3C 给出的标准简写：

1
2
 
<mask-layer> = <mask-reference> <masking-mode>? || <position> [ / <bg-size> ]? ||
<repeat-style> || <geometry-box> || [ <geometry-box> | no-clip ] || <compositing-operator>

对照一下 background 常用写法，又可以简化为：

1
 
mask: [mask-image] [mask-repeat] [mask-position] / [ mask-size];

相信很多人都知道：部分安卓机型 background 简写不支持 background-size，需要单独写一个 background-size。同样的这部分安卓机也要求 mask-size 要单独写，所以 mask 的简写应该是：

1
2
 
mask: [mask-image] [mask-repeat] [mask-position];
mask-size: [mask-size];

2. 图标的一个便捷选项

图标的主流方案有两种：Icon-Font 和 SVG Sprite。凹凸实验室推荐使用 SVG Sprite，具体参见 @高大师 的大作『 拥抱Web设计新趋势：SVG Sprites实践应用』。

笔者看来，这两种方案存在一个前提：图标必须是矢量图。这其实是道门槛，不是所有团队/个人都跨得过去的。
本节将介绍一个低成本的方案：Mask Icon

2.1 Mask Icon

素材icon.png : 原始png icon

SASS源码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
// 生成 黑、红、黄、蓝四个 icon。
.icon {
        
	display: inline-block;
	width: 30px;
	height: 30px;
	background-color: black; // 控制图标的颜色
	-webkit-mask: url(images/icon.png) 0 0 no-repeat;
	-webkit-mask-size: 100% 100%;
	&.red {
        
		background-color: red;
	}
	&.yellow {
        
		background-color: yellow;
	}
	&.blue {
        
		background-color: blue;
	}
}

HTML源码：