| 从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表示完全不透明。 |
|
FinishOpacity
|
这是一个同Opacity一起使用的选择性的参数，当同时设定Opacity和FinishOpacity时，可以制作出透明渐进的效果，比较酷。 |
从0到100，0表是完全透明，100表示完全不透明。 |
|
Style
|
当同时设定了Opacity和finishOpacity产生透明渐进时，它主要是用赤指定渐进的显示形状。 |
0：没有渐进；1：直线渐进；
2：圆形渐进；3：矩形辐射。 |
|
StartX
|
渐进开始的 X 坐标值 |
|
|
StartY
|
渐进开始的 Y 坐标值 |
|
|
FinishX
|
渐进结束的 X 坐标值 |
|
|
FinishY
|
渐进结束的 Y 坐标值 |
|
看一下下面的演示，你就知道了：
<table>
<tr>
<td>原图</td>
<td>Style=0</td>
<td>Style=1</td>
<td>Style=2</td>
<td>Style=3</td
<tr></tr>
<td><img src="test.jpg"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=0"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=1"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=2"></td>
<td><img src="test.jpg" style="filter : Alpha(Opacity=50), style=3"></td>
</tr>
</table>
|