实现图片的透明度渐变效果，效果如下：
先说下我的实现，并没有用什么黑科技，而是通过两层图层堆叠的方式来做的。下面一层就是单纯的 svg 图片，上面覆盖了一层遮罩，并设置遮罩的背景色为蓝色到透明色的从左到右渐变。这样，看上去就是一个图片从右到左渐渐变得透明的效果。
这是我比较粗暴的方法，后来在网上看到一种更加优雅的方式：
大体上差不多，重点是 CSS 的 background-image 属性可以设置多张图片，用逗号隔开 。因为我不知道这个属性有这个能力才会额外加了个渐变透明图层来实现效果。
图层透明可能有3种可能。
图层没有背景色或背景图片，其本身就是透明的，其中有文字、图片不透明，没有内容的区域可以直接看到下一层。
通过CSS样式表设置
filter:alpha(Opacity=50) /*IE支持，取值0-100*/
opacity: 0.5 /*HTML5浏览器，取值0-1*/
这种方法包括背景，内容的文字、图片、边框都会变为半透明。
3、做一张PNG图片，PNG图片支持透明和半透明甚至渐变透明。图层以这张图片作为背景。和第一种情况一样，背景是透明或半透明的，但内容是不透明的。
如果你经常使用Photoshop，用里面的图层来理解CSS+DIV，你就明白了，一个DIV就是一个图层，层叠加在一起，用CSS修饰就是我们看到的效果了。DIV不修饰时默认是透明的，如果不想看到它后面那个层的颜色或图像，只有在前面的层设置颜色或图像。
