CSS滤镜实现黑白、底片和X光效果

　　这一次我们利用CSS的另外几个无参数滤镜Gray滤镜、Invert滤镜和Xray滤镜分别来实现图片的黑白效果、底片效果和X光效果。

　　黑白效果

　　代码：

　　1、内部插入式

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

　　〈style type = text/css〉

　　.baw{filter:Gray}

　　〈/style〉

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

　　注意：在〈head〉与〈/head〉之间插入代码中，baw前有一个“.”(不包括引号)，请一定不要漏掉了。

　　2、直接插入式

　　在图片属性代码中加入：

　　style=" filter: Gray"

　　效果如图1所示。

图1

　　特点：通过使用CSS的gray滤镜，使彩色图片变为黑白图片。

　　底片效果

　　代码：

　　1、内部插入式

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

　　〈style type = text/css〉

　　.negative{filter:Invert}

　　〈/style〉

　　然后在图片属性代码中加class=" negative "(注意negative前的"."号)。

　　2、直接插入式

　　在图片属性代码中加入：

　　style=" filter: Invert"

　　效果如图2所示。

图2

　　特点：通过使用CSS的invert滤镜，使图片出现照片底片的效果。

　　X光效果

　　代码：

　　1、内部插入式

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

　　〈style type = text/css〉

　　.Xlight{filter:Xray}

　　〈/style〉

　　然后在图片属性代码中加class=" Xlight "(注意Xlight前的"."号)。

　　2、直接插入式

　　在图片属性代码中加入：

　　style=" filter: Xray"

　　效果如图3所示。

图3

　　特点：通过使用CSS的xray滤镜，使图片出现X光照射的轮廓效果。

　　至此，我们这个CSS滤镜特效实例就先介绍到这里，CSS滤镜在Dreamweaver中用起来很方便，且能使文字产生一种类似图像的效果，但比起图片来可就“瘦小”多了，除了我们上面说过的，CSS的滤镜还有很多种，利用它们能实现很多不同的效果，感兴趣的朋友不妨到www.ccidnet.com/school/web//2001/04/30/70_4096.html看看，会有意想不到的收获哦。