CSS滤镜[1]（CSS的滤镜属性的标识符是filter）
[B][COLOR=#336633]1、概述[/COLOR][/B] [PP] 好了，下面我们将进入CSS的最精彩的部分--滤镜，它将把我们带入绚丽多姿的多媒体世界。正是有了滤镜属性，页面才变得更加漂亮。
CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象，我们先来看一下它的书写格式：
[PP] [COLOR=#006666]filter：filtername（parameters）[/COLOR]
[PP] 怎么样？是不是很简单，看上去与前面讲的属性定义没什么太大的差别。Filter是滤镜属性选择符。
也就是说，只要您进行滤镜操作，就必须先定义filter；filtername是滤镜属性名，这里包括alpha、blur、chroma等等多种属性，详细内容请看下表：
[PP][img]http://www.ymxd.com/index/UploadFiles/20054124113734.gif[/img]
[PP] 上面filter表达式中括号内的parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。
看了上面长长的列表，是不是觉得很困难呀？不要紧，我们接下来一个一个的介绍这些属性在CSS中是怎样实现的（很简单哟^_^）。
下一节我们将首先学习Alpha透明属性的应用。
[HR][COLOR=#336633][B]2、alpha属性[/B] [/COLOR][PP] alpha是来设置透明度的。先来看一下它的表达格式：
[PP] [COLOR=#006666]filter：alpha（opacity=opcity，finishopacity=finishopacity，
style=style，startX=startX，startY=startY，finishX=finishX，
finishY=finishY）[/COLOR]
[PP] 哇，怎么这么长。是啊，不过这些参数都各有其用。
Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。
从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置opacity这一个参数就可以了。说了这么多，我们来看一个实例吧（见下图）：
[ALIGN=center][img]http://www.ymxd.com/index/UploadFiles/20054124113580.jpg[/img]
[PP] 实现上面这种效果的代码如下：
[PP] [COLOR=#006666]<html>
<head>
<title>alpha</title>
<style>[/COLOR][COLOR=#cc33cc]//*定义CSS样式*//[/COLOR]
[COLOR=#006666]<!--
div{position：absolute； left：50；top：70； width：150； }[/COLOR]
[COLOR=#cc33cc]//*定义DIV区域内的样式（位置为绝对定位，left、top、width的坐标）*//[/COLOR]
[COLOR=#006666]img{position：absolute；top：20；left：40；
filter：alpha(opacity=80)}[/COLOR]
[COLOR=#cc33cc]//*定义图片的样式，绝对定位，滤镜属性是透明度为80*// [/COLOR]
[COLOR=#006666]-->
</style>
</head>
<body>
<div>
<p style=“font-size：48；font-weight：bold；color：red；”>
Beautiful </p>[/COLOR][COLOR=#cc33cc]//*定义字体属性，前景色为红色*//[/COLOR]
[COLOR=#006666]</div>
<p><img src=“ss01076.jpg”> </p>[/COLOR]
[COLOR=#cc33cc]//*导入一张图片*//[/COLOR]
[COLOR=#006666]</body>
</html>[/COLOR]
[PP][COLOR=#006666] [/COLOR] 如果在上面的代码中稍做改动，则将产生另外多种效果。我们只修改img的样式属性，把head中的Img样式属性代码改为如下所示：
[PP] [COLOR=#006666]img{position：absolute；top：20；left：40；
filter：alpha(opacity=0,finishopacity=100,
style=1,startx=0,starty=85,finishx=150,finishy=85);}[/COLOR]
[COLOR=#cc33cc]//*设置透明渐变效果，起始坐标，终止渐变坐标，并设置透明样式值（style=1）为 线形*// [/COLOR]
[PP] 这段代码产生的效果如左下图所示，右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果，点击缩略图可放大。[/ALIGN][ALIGN=center][URL=http://www.ymxd.com/index/UploadFiles/20054124113621.jpg][img]http://www.ymxd.com/index/UploadFiles/20054124113360.jpg[/img][/URL] [URL=http://www.ymxd.com/index/UploadFiles/20054124113371.jpg][img]http://www.ymxd.com/index/UploadFiles/20054124113797.jpg[/img][/URL] [URL=http://www.ymxd.com/index/UploadFiles/20054124113112.jpg][img]http://www.ymxd.com/index/UploadFiles/20054124113784.jpg[/img][/URL]
[PP] [COLOR=#6666ff]Style=1[/COLOR] [COLOR=#6666ff]Style=2 [/COLOR] [COLOR=#cc3399] Style=3[/COLOR]
[PP][COLOR=#cc3399] [/COLOR]以上是CSS的Alpha滤镜属性的应用，具体应用还需要您自己找个例子练一练。
下一节我们将介绍blur（模糊）属性。
[HR][B][COLOR=#336633]3、blur属性[/COLOR][/B] [PP] 假如您用手在一幅还没干透的油画上迅速划过，画面就会变得模糊。CSS下的blur属性就会达到这种模糊的效果。
先来看一下blur属性的表达式：
[PP] [COLOR=#006666]filter：blur（add=add，direction，strength=strength）[/COLOR]
[PP] 我们看到blur属性有三个参数：add、direction、strength。
Add参数有两个参数值：true和false。意思是指定图片是否被改变成模糊效果。 Direction参数用来设置模糊的方向。模糊效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。角度方向的对应关系见下表：[/ALIGN][ALIGN=center][img]http://www.ymxd.com/index/UploadFiles/20054124114833.gif[/img]
[PP] Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到模糊影响。默认值是5像素。
还是看一个例子吧。[I][URL=http://www.hongen.com/pc/homepage/css/sl/reblur.htm][COLOR=#0000ff]点击这里看效果[/COLOR][/URL][/I]
[PP] 看起来是不是有些像万花筒，在这个例子中加入了一些javascript的语句，代码如下：
[PP] [COLOR=#006666]<html>
<head>
<title>blur css</title>
<script>
function handlechange(obj)
[/COLOR] [COLOR=#cc33cc]//*设置一个循环函数handlechange，对象是obj*//[/COLOR]
[COLOR=#006666]{ with(obj.filters(0))[/COLOR][COLOR=#cc33cc]//*Obj的filter属性*//[/COLOR]
[COLOR=#006666]{ if (strength<255)[/COLOR][COLOR=#cc33cc]//*设置循环条件*//[/COLOR]
[COLOR=#006666]{ strength +=1；direction +=45；}[/COLOR]
[COLOR=#cc33cc]//*每循环一次strength就加1，direction加45度*//[/COLOR]
[COLOR=#006666]}
}
</script>
</head>
<body>
<p><img id =“img1” src=“ss01087.jpg”
style=“filter：blur(strength=1)”
onfilterchange=“handlechange(this)”>[/COLOR]
[COLOR=#cc33cc]//*导入一幅图片，初始blur属性strength等于1，同时调用onfilterchange函
数*//[/COLOR]
[COLOR=#006666]</p>
</body>
</html> [/COLOR]
[PP][COLOR=#006666] [/COLOR]注：在javascript中blur属性是这样定义的：[COLOR=#006666]
[oBlurfilter=] object.Filters.blur[/COLOR]
[PP][COLOR=#006666] [/COLOR] 这个例子是Blur属性的一个比较复杂的例子，下一节我将向您介绍两个较简单的blur属性效果。[/ALIGN][HR]通过blur属性还可以设置页面中的字体。如果把字体的blur属性add参数值定义为1，得出来的字体效果是这样的（如下图）： [ALIGN=center][img]http://www.ymxd.com/index/UploadFiles/20054124114738.gif[/img]
[PP] 怎么样，是不是有些印象派的意思，这种效果的实现代码如下：
[PP] [COLOR=#006666]<html>
<head>
<title>filter blur</title>
<style>[/COLOR][COLOR=#cc33cc]//*CSS样式定义开始*//[/COLOR]
[COLOR=#006666]<!--
div{width：200；
filter：blur(add=true,direction=90,strength=25)；}[/COLOR]
[COLOR=#cc33cc]//*设置DIV样式，滤镜blur属性*//[/COLOR]
[COLOR=#006666] -->
</style>
</head>
<body>
<div style=“width:702； height: 288”>
<p style=“font-family:lucida handwirting italic；
font-size:72；font-style:bold；color:rgb(55,72,145)；” >
LEAF</p> [/COLOR]
[COLOR=#cc33cc]//*定义字体名称、大小、样式、前景色*//[/COLOR]
[COLOR=#006666]</div>
</body>
</html> [/COLOR]
[PP][COLOR=#006666] [/COLOR]我们看到strength设置为25，如果把其值再改大一些，就会达到非常夸张的效果，同时把Direction参数值为180，显示效果如下图：[/ALIGN][ALIGN=center][img]http://www.ymxd.com/index/UploadFiles/20054124114140.gif[/img]
[PP] 用blur属性设置字体可以达到很多效果，把direction和strength再做修改，还能达到多种效果，您可以自己修改试一试。
这一节我们介绍了Blur属性，下一节将向您介绍Chroma属性。
[HR][B][COLOR=#336633]4、Chroma属性[/COLOR][/B] [PP] Chroma属性可以设置一个对象中指定的颜色为透明色，它的表达式如下：
[PP] [COLOR=#006666]Filter：Chroma（color=color）[/COLOR]
[PP] 这个属性的表达式是不是很简单，它只有一个参数。只需把您想要指定透明的颜色用Color参数设置出来就可以了。比如下面这幅图：[/ALIGN][ALIGN=center][img]http://www.ymxd.com/index/UploadFiles/20054124114472.gif[/img]
[PP] 图中显示两种字体，两种颜色，我们现在对“leaves”字体添加chroma属性，使其透明。代码如下：
[PP] [COLOR=#006666]<html>
<head>
<title>chroma filter</title>
<style>
<!--
div{position：absolute；top：70；width：200；
filter：chroma(color=green)} [/COLOR]
[COLOR=#cc33cc]//*定义DIV范围内绿色为透明色，另外设置DIV的位置*//[/COLOR]
[COLOR=#006666]p{font-family：bailey；font-size：48；font-weight：bold；
color：green}[/COLOR] [COLOR=#cc33cc]//*设置P的字体名称、大小、粗细、颜色*//[/COLOR]
[COLOR=#006666]em{font-family:lucida handwriting italic；font-size:48；
font-weight：bold；color：rgb(255,51,153)[/COLOR]}
[COLOR=#cc33cc]//*设置EM的字体名称、大小、粗细、颜色*//[/COLOR]
[COLOR=#006666]-->
</style>
</head>
<body>
<div>
<p>LEAVES <em>LOVE</em></p>
</div>
</body>
</html>[/COLOR]
[PP] 通过上面代码中对chroma的属性设置，使绿色透明。显示效果如下图：[/ALIGN][ALIGN=center][img]http://www.ymxd.com/index/UploadFiles/20054124114876.gif[/img]
[PP] 我们看到绿色的leaves字体不见了，实际上它是透明了，在IE下点击它所在的区域，它还是会显示出来（见下图）：[/ALIGN][ALIGN=center][img]http://www.ymxd.com/index/UploadFiles/20054124114811.gif[/img]
[PP] 另外，需要注意的是，chroma属性对于图片文件不是很适合。因为很多图片是经过了减色和压缩处理（比如JPG、GIF等格式），所以它们很少有固定的位置可以设置为透明。
[PP] 本节我们讲述了chroma属性的应用，下一节将向您介绍Dropshadow属性。 [/ALIGN][HR]
