文/飞熊

　　常做网页的朋友们一定都知道CSS吧，CSS是Cascading Style Sheet的缩写，通常人们都叫它“样式表”或“级联样式”。它的功能非常全面，从文字、图片、段落到整个网页各个方面都有它的强大之处，今天我们就来说说CSS中的滤镜效果。

　　大家在做网页时，对图像处理多数都是用Photoshop等图形处理软件吧，其实在CSS中自带了许多滤镜，合理应用这些滤镜您同样可以做出以上软件所做出的效果。下面我就通过实例来看看CSS中的滤镜应用。

　　图片雾化

　　代码：

　　1、内部插入式

　　在〈head〉与〈/head〉之间插入：

　　〈style type = text/css〉

　　.fog{filter:alpha(opacity=100,style=2)}

　　〈/style〉

　　然后再在图片属性代码中加class="fog"。

　　注意：在＜head＞与＜/head＞之间插入代码中fog前有一个“.”?不包括引号?，请一定不要漏掉了。

　　2、直接插入式

　　在图片属性代码中加入：

　　style=" filter:alpha(opacity=100,style=2)"

　　效果如图1。

图1

　　特点：通过使用CSS的“alpha”滤镜，做出图片雾化的效果。

　　延伸：“style”参数：“0”没有渐进，“1”直线渐进，“2”圆形渐进，“3”矩形渐进；参数“opacity”为不透明的程度，百分比。

　　图片风化

　　代码：

　　1、内部插入式

　　在〈head〉与〈/head〉之间插入：

　　〈style type = text/css〉

　　.wind{filter:Blur(Strength=10)}

　　〈/style〉

　　然后再在图片属性代码中加class="wind"(注意“.”号)。

　　2、直接插入式

　　在图片属性代码中加入：

　　style=" filter: Blur(Strength=10)"

　　效果如图2。

图2

　　特点：通过使用CSS的blur滤镜，使图片具有风吹模糊的效果。

　　本文所提供的代码都非常简单，您也可以到www.skyeyes.onchina.net上观看效果。