实现图片的透明度渐变效果，效果如下：
先说下我的实现，并没有用什么黑科技，而是通过两层图层堆叠的方式来做的。下面一层就是单纯的 svg 图片，上面覆盖了一层遮罩，并设置遮罩的背景色为蓝色到透明色的从左到右渐变。这样，看上去就是一个图片从右到左渐渐变得透明的效果。
这是我比较粗暴的方法，后来在网上看到一种更加优雅的方式：
大体上差不多，重点是 CSS 的 background-image 属性可以设置多张图片，用逗号隔开 。因为我不知道这个属性有这个能力才会额外加了个渐变透明图层来实现效果。
在一些网站的登录页面上，经常可以发现，一张图片叠加在另一张图片上，底层的图片若隐若现，利用css中的透明属性opacity可以实现这种效果，下面就简单介绍一下怎么写代码
新建一个HTML文件，下载两张图片，如下图，放在一个文件夹中，避免出现路径问题
代码示例如下，主要利用css伪元素::before，F_box为前置层，浮于背景上方
下面简单分解下代码，分为1，2，3，第一部分，设置背景图片001.jpg；第三部分，固定前置层图片002.jpg的位置；第二部分，利用伪元素：：before，设置属性opacity来调节透明度，取值为0-1，0是全透明，即看不见的效果，1是全不透明
代码示例中，设置opacity为0.5，半透明状态，实际页面效果如下
有很多中方法,如果是全透明,那么最简单的方法(以默认模板为例子)是找到:.modbox 模块内容区{padding:10px 10px 0 10pxbackground-color:#FFFFFF}
.modtl 模块左上角背景{background:url(temp1/ptitl.gif) no-repeat top leftline-height:1px}
.modtc 模块中上背景{background:url(temp1/ptitc.gif) repeat-x}
.modtr 模块右上角背景{background:url(temp1/ptitr.gif) no-repeat top rightline-height:1px}
.modbl 模块左下角背景{background-color:#FFFFFFline-height:1px}
.modbc 模块中下背景{background-color:#FFFFFFline-height:1px}
.modbr 模块右下角背景{background-color:#FFFFFFline-height:1px}
这几行代码(开头的相同即可以,大括号里的可能有点不相同),把background-color:#FFFFFF/*背景色*/ 和 background:url(temp1/ptitr.gif) /*背景图片*/的#FFFFFF和括号里的图片地址去掉,这样,所有的模块就变成了透明的,因为没有背景色也没有背景图片.
如果还不透明的话,那就把
.stage空间主体{background-color:#FFFFFF}的像#FFFFFF一类的颜色代码和像background:url()之类的括号里面的图片地址去掉.
因为CSS是分层的,模块的代码在主体代码的上面,两层是叠加在一起的,所以说这两层的背景色和背景图片的代码都要去掉,那么才会显示出最下面一层的body的背景色和背景图片.这种办法是最简单的一种了.还有不少的办法.
