CSS中的Filter样式特效.docVIP

CSS中的Filter样式特效1 　　从IE 4.0版开始，就提供了一些内置的多媒体滤镜特效，正是由于这些基于CSS的样式属性的控制，于是我们在编写网页的时候，即使我们不用图片，也可以使我们的文字，图片，按钮或是DIV标识鲜艳无比，充满生气，从而为自己的网页增加了比较美妙的视觉效果。 下面，我们就来看看CSS的Filter样式。这里，即使你没有CSS这方面的知识，相信以下的内容也不会很难懂的。当然，首先，我默认你已经学过HTML，并且还能做网页，最好是还知道一点Scripts语句。由于各种浏览器对CSS的支持的原因，我建议你使用IE4.0以上版的浏览器，强烈建议你使用IE5.0版，这样，你就会毫不费力地看到所有的特效。 　　一、建立Filter样式 　　Filter既然是CSS样式表中的一员，那么它就可以像其它样式的定义和应用方式一样，可能直接定义在职HTML标识的head和/head只间。其语法结构为： filter：名称(参数及其值) 　例如：imgblur { filter : Blur( strength=30 ) } 　当然，它也可以通过Style标识定义在HTML的标识里面，如： Image ID=test SRC=test.gif Style=Filter : Blur( Strength=30 ) 　　以上就是使用CSS中filter样式的使用方法，其实这和其它CSS的样式定义方式一样，分为外部引用、内部引用和局部引用三种，上面的第一种是内部引用，第二种是局部引用，外部引用则要先建立一个CSS的文件，然后用link rel=StyleSheet type=text/css href=样式文件的URL来嵌入HTML文件。有关CSS的定义方式，请大家参考网页陶吧里的相关文章。 　　Filter样式属性允许一次设定多个滤镜效果，也就是说，可以让一个HTML的元件同时拥有多个滤镜的的效果。例如：…… ……　　　　　　img id=image1 src=test.jpg border=0　　　　　　img id=image2 src=test.jpg border=0 style=filter : blur ( Strength=30 ) flipv()…… …… 　　在以上的例子中，ID为image1的图片是正常显示的图片，而ID为image2的图片则同时应用了模糊（Blur）和上下颠倒（Filpv）两种滤镜。以下是同一图片的两种效果：（得用IE4.0以上版的浏览器浏览） 　　怎么样，还行吧，这里要请大家注意几点: 　　1、如果使用多的滤镜，那么滤镜间要以空格分开。 例如： img src=test.jpg style=Filter: alpha(opacity=30) Blur(amount=10) 　　2、一个滤镜中的若干参数以逗号分隔。 例如： img src=test.jpg style=filter : blur(amount=30,strength=50) 　　3、Filter和其他的CSS样式则以分号分开。 例如： img src=test.jpg style=filter: blur(amount=30) ; Position: relative 　　接着，我们来看看Filter到底有哪些滤镜。 二、静态滤镜的种类 　　视觉效果的滤镜。在IE4.0以上版中，支持以下14种滤镜： 滤镜名 说明 Alpha 让HTML元件呈现出透明的渐进效果 Blur 让HTML元件产生风吹模糊的效果 Chroma 让图像中的某一颜色变成透明色 DropShadow 让HTML元件有一个下落式的阴影 FlipH 让HTML元件水平翻转 FlipV 让HTML元件垂直翻转 Glow 在元件的周围产生光晕而模糊的效果 Gray 把一个彩色的图片变成黑白色 Invert 产生图片的照片底片的效果 Light 在HTML元件上放置一个光影 Mask 利用另一个HTML元件在另一个元件上产生图像的遮罩 Shadow 产生一个比较立体的阴影 Wave 让HTML元件产生水平或是垂直方向上的波浪变形 XRay 产生HTML元件的轮廓，就像是照X光一样 　　这些滤镜就像是PhotoShop这一类图像处理软件所提供的特效一样，有了这些特效，你就可以直接在HTML中对图片进行特效处理了，而不用再用专门的图片处理软件编辑图片了。一般而言，用得最多的是图片和文字。那么，就让我们来看看各个滤镜中有些什么样的参数和效果。 三、Alpha 滤镜 参数名 说明 取值说明 Opacity 不透明的程度，百分比。 从0到100，0表是完全透明，100表示完全不透明。 Fi