css

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的标识里面，如：

　　以上就是使用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、如果使用多的滤镜，那么滤镜间要以空格分开。

例如：

　　2、一个滤镜中的若干参数以逗号分隔。

例如：

　　3、Filter和其他的CSS样式则以分号分开。

例如：

　　接着，我们来看看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>
　　　　

原图	style=0	style=1	style=2	style=3