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