全新版WeGame客户端下载：http://wegame.com/client
背景
在全新的WeGame版本，如果首次登录，则会加载新手引导的模块，在这个模块中要实现下图右边效果，我们采用CSS Mask遮罩，类似于alpha透明通道的遮罩效果。
介绍
css遮罩最早是由苹果公司提出，并已经出现在W3C草案中的属性，css mask属性目前还不是正式标准，需要添加-webkit-内核前缀才能使用。
兼容性
目前对IE/Edge全部兼容，只对chrome，FF等兼容。因为WeGame客户端内部打包有qblink内核，对css属性的支持基本与chrome内核接近，这样就使得我们可以使用mask属性。
Mask原理
蒙板可以是 CSS3 渐变或者半透明的PNG图片，蒙板元素的alpha值为0的时候会覆盖下面的元素，为1的时候会完全显示下面的内容，敲黑板，这点很重要。如下示例：
Mask语法
按 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 |
实践
我们需要用到的是渐变的效果，于是我们想当然的做了一个小的渐变遮罩图片，让透明的地方将下面元素“透”出来，但是发现效果不对。原来从原理上看这是错误的，因为alpha值为0的时候反而是会覆盖下面的元素，所以我们调整后，做了一个大的渐变图片。效果对比如下：
CSS Code： -webkit-mask-image: url(../images/mbg-l.png);-webkit-mask-repeat: repeat-y;
其他方案
有没有其他方案可以实现同样的效果呢？其实一开始我们想到的是用一个伪类或者其他元素弄一个渐变背景色盖在上面，实现起来很简单，但是效果达不到设计师的预期，一个是背景的alpha透明通道效果，还有一个是渐变的边界值无论调整到多小，都会有一点点肉眼可见的分隔线，经过对比最终我们选择了css mask来实现，实现效果对比如下：
总结
CSS Mask还可以在其他方面有很好的应用，比如icon图标，比如一些比较有意思loading图等。大家也可以学习下方的参考文章。
参考文章：https://aotu.io/notes/2016/10/19/css3-mask/index.html