CSS3 Filter 滤镜透明效果应用实例

　　透明效果自CSS1起就有之，只是随着浏览器的升级，CSS属性表示方法也发生了变化。在CSS中，用 Filter 和 opacity 表示透明度，主要用于设置背景、图片透明度，例如通过逐渐改变图片透明度让图片逐渐显示或隐藏。

　　一个元素可用多个滤镜效果，在它们之间用空格隔开即可。ie8之前的浏览器，设置透明度用 filter:alpha(opacity=70)；而 ie9 以上版本的浏览器再用此方法无效，需用 opacity:.7，同是是设置透明度为70%，具体代码对比如下：

　　 filter:alpha(opacity=70);//ie8以下版本有效
　　 opacity:.7;//ie9以上版本有效

　　CSS3 Filter 滤镜透明效果应用实例

　　html代码：

　　<ul class="filter-opacity">
　　　<li class="opacity2">透明度为20%：filter:alpha(opacity=20);opacity:.2</li>
　　　<li class="opacity5">透明度为50%：filter:alpha(opacity=50);opacity:.5</li>
　　　<li class="opacity7">透明度为70%：filter:alpha(opacity=70);opacity:.7</li>
　　</ul>

　　CSS样式：

<style type="text/css">
.filter-opacity{width:380px;height:100px;padding-top:10px;border:2px solid #4b3737;background-color:#e3e2e0;}
.opacity2{filter:alpha(opacity=20);opacity:.2;}

.opacity5{filter:alpha(opacity=50);opacity:.5;}
.opacity7{filter:alpha(opacity=70);opacity:.7;}
</style>

　　效果图：

• 透明度为20%：filter:alpha(opacity=20);opacity:.2
• 透明度为50%：filter:alpha(opacity=50);opacity:.5
• 透明度为70%：filter:alpha(opacity=70);opacity:.7

　　从效果图中可以看出，透明度越低的，文字越模糊，特别是透明度只有20%的，模糊度十分明显；而透明度为50%与70%的区别似乎不太明显。