CSS中的Filter样式特效（一）

来源：互联网发布：全职高手知乎编辑：程序博客网时间：2024/05/17 18:42

从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>
　　　　