1. 用法
-webkit-mask样式是利用该属性指定的图片作为遮罩，利用这张图像的透明度来显示位于该遮罩图下方的图像。如果遮罩图某个像素点透明度为1则显示下方的图像，透明度为0则不显示，介于0-1之间则呈现相应的透明度。 详情参考 [mask - CSS | MDN][1] 可以看到，mask的语法基本上拷贝自background，可以设置遮罩的url, position, repeat, size等属性，但不能直接设置颜色（纯色的遮罩意味着用opacity就能实现）。-webkit-mask-url可以设置gradients的渐变图片，也可以设置base64编码的图片。
2. 利用mask实现图标变色
想让图标可以任意变色，常见的方案有：font-awesome, SVG等，甚至还有[drop-shadow][2]。其实可以利用background变色，而利用遮罩去绘制图标。遮罩透过的地方是图标的填色部分，而遮罩盖过的地方则没有颜色。 这种方法的优点就是转换成本极低，可以直接利用已有的图标PNG图。具体方法如下：
-
将图标保存为PNG图，注意非图标区域应该是透明的。如果原有图标是sprite图，没关系，不用变，因为mask支持position属性。原先输出的图标不是纯黑色的？也没关系，因为mask样式只认你图片的透明通道
-
设置图标的CSS，例如：