CSS遮罩
CSS遮罩是2008年4月苹果公司添加到webkit引擎中的，只有webkit才支持的特性； 遮罩提供了基于像素基本的可以控制元素透明的能力； 利用CSS遮罩可以实现让图片以任意形状显示，可以实现半透明渐变遮罩等效果；
原理
图像是由rgb三个通道以及在每个像素上定义的颜色组成的。但是在他们之上还有第四个通道，alpha通道，通过亮度定义每个像素上的透明度。白色意味着不透明，黑色意味着透明，介于黑白之间的灰色表示半透明 给一个html元素使用css遮罩，就会这样处理。不用给图片应用一个alpha通道，只需要给一个图片运用一个
-webkit-mask-image的css属性。 例如：-webkit-mask-image: url(mouse.png);他从图片遮罩里读出图片的透明信息，然后应用到html元素上；-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,0));实现半透明渐变遮罩；