20.1 滤镜和过渡的基本知识

第20章  使用IE专有filter属性实现滤镜和过渡效果

微软为Internet Explorer的CSS解释引擎做了扩展，引入了一个名为filter的属性，使用该属性可以实现滤镜和过渡等多媒体效果，如果你觉得你的网页所面临的用户都使用IE浏览器，那么就可以考虑使用filter属性为你的网页增添丰富的效果。

filter属性自IE4.0就开始被支持，但是那时只有很少的几个滤镜效果，直到IE5.5添加了大量的滤镜和过渡效果，这些被分成三类：程序性的界面滤镜、静态滤镜、动态过渡效果滤镜。

这一章，我们就来介绍一下如何使用滤镜和过渡效果。

20.1滤镜和过渡的基本知识

滤镜和过渡效果，这些被分成三类：程序性的界面滤镜、静态滤镜、动态过渡效果滤镜。前两者又可以被统称为“视觉滤镜”，它允许您更改Web页上的元素的外观，从而可以在文本和图像上利用视觉滤镜获得的各种效果，例如：阴影，浮雕，凹雕以及模糊等。

“过渡效果滤镜”将动态影响Web内容的外观，它使用动画来体现内容上的变化。一般，该滤镜将会和脚本程序（例如JavaScript）配合使用。例如，使用脚本代码更改img元素的src属性，从而改变了图像的来源，那么，这个时候您可以使用过渡来将图像渐变到视点中。

20.1.1滤镜和过渡的基本使用方法

滤镜和过渡都使用filter属性来完成，通过为该属性定义不同的属性值实现不同的效果。基本的语法格式如下： 20.1.2程序性的界面滤镜

filter：滤镜名(滤镜参数)

可以看到属性值由两部分组成：滤镜名和滤镜参数。因此，我们这章要学习的主要就是滤镜名和与之对应的滤镜参数。例如下面的代码（这个范例将在本章介绍滤镜时使用，仅变换滤镜属性）：

<div id="div1" style="width:280px; height:100px; background-color:#FFCC00;filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=20,Direction=90);">

    <img src="dog.gif" style="float:left"/>静态滤镜效果<br />仅适用于Internet Explorer

</div>

这段代码使用div元素的style属性定义了滤镜功能：

filter:progid:DXImageTransform.Microsoft.MotionBlur(Strength=20,Direction=90);

括号前的MotionBlur即是滤镜名，括号内是该滤镜的参数，参数之间使用逗号隔开，图20-1显示使用滤镜前后内容的呈现：

图20-1 滤镜效果

滤镜名前的字符串“progid:DXImageTransform.Microsoft.”是微软滤镜执行程序的包路径，大多数滤镜名都使用该字符串作为前缀。

也可以对一个元素同时使用多个滤镜，例如下面的代码：

<div id="div1" style="width:280px; height:100px; background-color:#FFCC00;filter:progid:DXImageTransform.Microsoft.MotionBlur   (Strength=20,Direction=90) progid:DXImageTransform.Microsoft.Wave (add=false,lightStrength=30);">

     <img src="dog.gif" style="float:left"/>静态滤镜效果<br />仅适用于Internet Explorer

</div>

这里就使用了两个滤镜：MotionBlur和Wave。呈现的效果也是两个滤镜效果的叠加，如图20-2所示：

图20-2 滤镜效果

下面我们就先来看一下都有哪些滤镜和过渡效果，从而先掌握一下都有哪些滤镜名可用，每个滤镜名其实就对应着一类滤镜效果。

 

程序性的界面滤镜用于在对象的背景和内容之间显示一个定制的色彩层。该滤镜有下面两种效果：

AlphaImageLoader
 在对象BOX边界内显示一个图像，该图像位于对象的背景和内容之间，并且可以对此图片进行剪切和改变尺寸。如果载入的是PNG图片，则能够呈现0%-100%的透明度。
 
Gradient
 在对象的背景和内容之间显示一个定制的色彩层，色彩层可以是线性渐变形式，。

20.1.3静态滤镜

静态滤镜用来调整对象的静态变化。该滤镜有下面几种效果：

Alpha
 调整对象内容的透明度。
 
BasicImage
 调整对象内容的色彩、图像旋转或透明度。
 
BlendTrans
 用渐隐效果转换对象内容，新对象逐渐出现，旧对象逐渐消失。这个滤镜也被认为是一个过渡效果滤镜。
 
Blur
 使对象内容模糊。
 
Chroma
 将对象内容中指定的颜色显示为透明。
 
Compositor
 将初始对象和新对象的色彩进行逻辑的混合，并使用混合后的色彩显示新的对象内容。初始对象和新对象的色彩、透明度通过计算来确定最终要输出的效果。
 
DropShadow
 制作对象的阴影效果，也就是说对象的内容户呈现一个轮廓并偏离对象，但阴影只能是纯色。
 
Emboss
 用灰度值为对象内容制作浮雕纹理效果。
 
Engrave
 用灰度值为对象内容制作篆刻纹理效果。
 
FlipH
 用于水平反转对象内容，不过已经被BasicImage滤镜取代。
 
FlipV
 用于垂直反转对象内容，不过已经被BasicImage滤镜取代。
 
Glow
 为对象内容添加辉光效果，辉光出现在对象内容的外边缘。
 
Gray
 以灰度方式显示对象内容，不过已经被BasicImage滤镜取代。
 
ICMFilter
 根据一个图像颜色管理（ICM）的配置文件转换对象内容的色彩。这样能激活对某些内容的显示的改良，或激活对硬件设备输出的模拟显示，例如打印机或显示器。
 
Invert
 以反相方式显示对象内容，不过已经被BasicImage滤镜取代。
 
Light
 为对象内容建立光照效果。
 
MaskFilter
 将对象内容的透明像素显示为一个遮罩，而非透明像素则转为透明。
 
Matrix
 使用矩阵转换改变对象内容的尺寸，并可以旋转或反转对象内容。
 
MotionBlur
 为对象内容制作运动模糊效果，例如残影。
 
Redirect
 当前尚不支持该滤镜。
 
RevealTrans
 使用预定的24种转换效果转换对象的内容。这个滤镜也被认为是一个过渡效果滤镜。
 
Shadow
 为对象内容建立阴影效果，阴影可以使用线性渐变颜色。
 
Wave
 沿着纵轴为对象内容建立一个像正弦曲线那样的波纹式扭曲效果。
 
Xray
 以X光效果显示对象内容，也就是改变对象内容颜色的深度，以黑白色显示，不过已经被BasicImage滤镜取代。

20.1.4过渡效果滤镜

过渡效果滤镜能够将内容以特殊的视觉效果显示出来，一般是和脚本代码配合才能使用，所以本书仅作简单的介绍，您可以参考下面的网址获得详细信息：

http://msdn2.microsoft.com/en-us/library/aa155108.aspx

该滤镜有下面几种效果：

Barn
 用类似开门或关门的效果来转换新的对象内容。
 
Blinds
 用类似打开百叶窗或关闭百叶窗的效果来转换新的对象内容。
 
CheckerBoard
 用类似国际象棋棋盘的网格翻起效果转换新对象内容和旧的对象内容。
 
Fade
 用类似淡入的效果来呈现新对象内容，而同时旧的对象内容逐渐淡出。
 
GradientWipe
 用类似线性渐变滚过的方式呈现新对象内容，而同时旧的对象内容以线性渐变滚过的方式消失。
 
Inset
 用对角线逐渐扩展方式显示新的对象内容。
 
Iris
 用类似照相机光圈打开的方式显示新的对象内容，并且形状各异。
 
Pixelate
 将对象的内容现为色彩方块，这些方块最终被替换成对象内容，每个方块的色彩就是它们要替换的像素的颜色值。这个滤镜本身就可以呈现为过渡动画。
 
RadialWipe
 用放射状擦除效果转换对象内容，效果类似于汽车挡风玻璃的雨刷器擦过。
 
RandomBars
 用随机出现的线条来逐渐呈现对象内容。
 
RandomDissolve
 用随机出现的像素来逐渐呈现对象内容，这个又被称为溶解。
 
Slide
 用随机滑如、滑出图片的一部分这样的效果来转换对象内容。
 
Spiral
 用螺旋式运动来呈现对象内容。
 
Stretch
 用伸缩变形运动效果来呈现新的对象内容，同时隐去旧的对象内容。其中一个功能就类似于一个六面体魔方从一面翻到另一面。
 
Strips
 用带锯齿的边逐渐覆盖旧的对象内容，并呈现新的对象内容。
 
Wheel
 用旋转运动效果逐渐覆盖旧的对象内容，并呈现新的对象内容。旋转运动效果就像是轮子的辐条在旋转。
 
Zigzag
 用向前或向后运动的效果逐渐覆盖旧的对象内容，并呈现新的对象内容。

 

 

20.2程序性的界面滤镜详解

下面详细介绍一下程序性的界面滤镜。

20.2.1滤镜AlphaImageLoader

该滤镜的语法格式如下：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)

该滤镜属性的含义如下表所示：

属性名	功能描述
sizingMethod	设置滤镜作用的对象的图片在对象容器边界内的显示方式。 可取值包含如下几个： crop:剪切图片以适应对象尺寸（如果图片比对象尺寸大）。 image:默认值。增大或减小对象的尺寸边界以适应图片的尺寸。 scale:缩放图片以适应对象的尺寸边界。
src	使用绝对或相对url地址指定背景图像。
Enabled	设置滤镜是否激活，true表示激活，false表示不激活滤镜。

例如下面的滤镜设置代码：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='dog.gif' ,sizingMethod='scale');

这将能够产生如图20-3所示的效果：

图20-3 滤镜效果

可以看到加载了一幅图片，并进行了缩放以适应对象BOX的尺寸边界。如果将scale改为image，那么将删除对象BOX右边的的内容，因为图片比对象BOX尺寸小，文字也就显示不出来了。

20.2.2滤镜Gradient

该滤镜的语法格式如下：

filter:progid:DXImageTransform.Microsoft.Gradient(sProperties)

该滤镜属性的含义如下表所示：

属性名	功能描述
GradientType	设置色彩渐变的方向。0表示垂直渐变，1表示水平渐变。
StartColorStr	设置色彩渐变的开始颜色和透明度。
StartColor	设置色彩渐变的开始颜色。值为0-4294967295之间的整数，0表示透明， 4294967295表示不透明白色。
EndColorStr	设置色彩渐变的结束颜色和透明度。
EndColor	设置色彩渐变的结束颜色。取值与StartColor相同。
Enabled	设置滤镜是否激活，true表示激活，false表示不激活滤镜。

StartColorStr和EndColorStr的格式为#AARRGGBB。AA、RR、GG、BB为十六进制正整数，取值范围为00-FF。RR指定红色值，GG指定绿色值，BB指定蓝色值，AA指定透明度。00是完全透明，FF是完全不透明。

StartColorStr和EndColorStr的取值范围为#FF000000-#FFFFFFFF，超出取值范围的值将被恢复为默认值。StartColorStr的默认值为#FF0000FF（不透明蓝色），EndColorStr的默认值为#FF000000（不透明黑色）。这意味着下面的滤镜代码将产生如图20-4所示的效果：

filter:progid:DXImageTransform.Microsoft.Gradient()

图20-4 滤镜效果

下面是一个该滤镜经常被用来实现的范例：

<head>

<style>

  <!--

  div.a

  {

    width:180px;

    height:18px; 

    border:#bfceff 1px solid;

    filter:progid:dximagetransform.microsoft.gradient(gradienttype=0,

                        startcolorstr='#ddecfb',endcolorstr='#ffffff');

  }

  .b

  {

    width:180px; 

    height:100px;

    border:#bfceff 1px solid;

     border-top:0px; 

  }

  -->

</style>    

</head>

<body>

<div class="a"></div>

<div class="b"></div>

</body>

在浏览器中，这段代码呈现如图20-5所示的效果：

图20-5 滤镜效果

可以看到标题栏是一个渐变的效果，如果不使用滤镜，那么就只好使用图片来实现了。