您好!欢迎您光临CSS中的Filter样式特效详解_汕头港湾! 棋牌 I 论坛 I 企业建站 I

会员注册

I

本站搜索

I

收藏本站

当前位置:首页 >>>网页工具>>>CSS中的Filter样式特效详解
CSS中的Filter样式特效详解
发表日期:2010/4/28 22:53:00 出处:本站原创 作者:未知 发布人:pilots 已被访问 664


CSS中的Filter样式特效详解

 从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 style="FILTER: Alpha(opacity=100,style=0)" src="test.jpg"></td>
<td><img style="FILTER: Alpha(opacity=100,style=1)" src="test.jpg"></td>
<td><img style="FILTER: Alpha(opacity=100,style=2)" src="test.jpg"></td>
<td><img style="FILTER: Alpha(opacity=100,style=3)" src="test.jpg"></td>
</tr>
</table>

原图

style=0

style=1

style=2

style=3

四、Blur 滤镜

  在前面,你已经看过了Blur滤镜的效果了,感觉好吧?现在让我们来了解一下它的参数。

参数名

说明

取值说明

Add

是否要在已经应用Blur滤镜上的HTML元件上显示原来的模糊方向 0表是不显示原对象;
非0表示要显示原对象。

Direction

设置模糊的方向。 0(上),45(右上),
90(右),135(右下),
180(下),225(左下),
270(左),315(左上)。

Strength

指定模糊图像模糊的半径大小。单位是像素(pixels) 默认值是5,取值范围为自然数。

让我们来看一个实例,

<DIV style="width:600;height:150;color:blue; filter:Blur(Direction=135, Strength=8)">Fileter样式模糊演示</DIV>

Fileter样式模糊演示

五、Chroma 滤镜

  Chroma滤镜主要是把图片中的某个颜色变成透明的,使用了该滤镜,原图片中的一部分颜色就好像没有了一样。它只有一个参数——Color,用来指定透明的颜色,即不显示出来的颜色。

原图

隐藏红色(#FF0000)

隐藏绿色(#00FF00)

隐藏蓝色(#0000FF)

  其原码如下:

<img src="test1.gif" width="100" height="50" style="Filter: Chroma(color=#FF0000)">
<img src="test1.gif" width="100" height="50" style="Filter: Chroma(color=#00FF00)">
<img src="test1.gif" width="100" height="50" style="Filter: Chroma(color=#0000FF)">

六、Dropshadow 滤镜

  Dropshadow 产生的效果是让HTML元件产生下落式的阴影,常用在文字或是图像上。以下是它的参数说明:

参数名

说明

取值说明

Color

指定阴影的颜色 #RRGGBB 格式的颜色值。

OffX

指定阴影相对于元件对象在水平方向偏移量。 整数。正数表示阴影在对象的右方,负数表示阴影在对象的左方。

OffY

指定阴影相对于元件对象在垂直方向偏移量。 整数。正数表示阴影在对象的上方,负数表示阴影在对象的下方。

Positive

指定阴影的透明程度。 0表示透明,没有阴影效果;
非0表示显示阴影的效果。

  再让我们来看个演示,

DropShadow 滤镜演示

源代码为:

<font color="#0000FF" face="楷体_GB2312"><strong>
<span style="font-size=36;FILTER:DropShadow(Color=#808080, OffX=5, OffY=5,
Positive=1);height:15" >DropShadow 滤镜演示</span></font>

七、FlipH 和 FlipV 滤镜

  FlipH 和 FlipV 这两个滤镜主要是产生水平翻转和垂直翻转的效果,这两个滤镜没有额外的参数设置,直接使用就可以了。

例如:

原样 FlipH 水平翻转 FlipV 垂直翻转
图片
文字 这是正常的文字 这是被水平翻转了的文字 这是被垂直翻转了的文字

原代码如下:

<img SRC="test.jpg" STYLE="Filter: FlipH()" width="100" height="50">
<img SRC="test.jpg" STYLE="Filter: FlipV()" width="100" height="50">
<span STYLE="Filter: FlipH();height=15">这是被水平翻转了的文字</span>
<span STYLE="Filter: FlipV();height=15">这是被垂直翻转了的文字</span>


八、Glow 滤镜

  Glow 效果可以让HTML元件对象的轮廓上产生一种比较柔和的边框,可以说是个晕,并且还有点像火一样有淡化的效果。下表是它的参数:

参数名

说明

取值说明

Color

指定晕开阴影的颜色 #RRGGBB 格式的颜色值。

Strength

指定晕开阴影的范围。 设定值从1到255,数字越大晕得就越强,数字越小则反之。

示例:

<h2 style="height:150;FILTER: Glow(Color=#FF0000,Strength=5)" lign="center">
这是利用 Glow 滤镜做的一个火焰字的效果,是不是很 Cool ?
</h2>

<div style="position:relative; left:200; height:100;width:150; FILTER: Glow(Color=#FF0000,
Strength=10)"align="center">
<img SRC="test.jpg" width="100" height="50">
</div>

效果如下所示:

这是利用 Glow 滤镜做的一个火焰字的效果,是不是很 Cool ?

如果那个图片是透明的GIF图片,就更会有意想不到的效果了。不信?你可以自己试试!

九、Gray 滤镜

  这个滤镜主要是把一个彩色图片变成黑白的,就像黑白照片一样,这个滤镜也是没有参数,直接使用就可以了。例如:

<img src="test1.gif" width="100" height="50" style="filter:gray()">

  可以看出,上面两幅图片中左边的是原样的,而右边的则是被 Gray 了的。并且,我们可以看出红颜色和绿颜色的灰度是一样的,这就是红绿色盲的产生的原因了。

十、Invert 滤镜

  该滤镜是反转图片中颜色的色调、饱和度、亮度,这就好像我们看见的照片的底片一样。就是那种效果。例如:

<img SRC="photo.jpg" style="filter:invert()" width="225" height="180">

  怎么样?使用了这个滤镜后,就是右边的这个样子了。对了,这个滤镜没有参数,差点忘说了。

十一、Mask 滤镜

  这个滤镜可以为网页上的HTML元件对象作出一个矩形遮罩,关于什么是遮罩我也不是说得太清楚,如果你用过Flash中的遮罩,你就会知道了,就是那个样子了,我说不出来。

来看一下它的参数:

参数名

说明

取值说明

Color

遮罩的颜色 #RRGGBB 格式的颜色值。

示例:

<h1 style="filter:mask(color=blue);height=1">这是一段被颜色为遮罩色的文字。</h1>

这是一段以蓝颜色为遮罩色的文字。

这是一段以白颜色为遮罩色的文字。

  在上面的效果中,我故意用了一幅红绿蓝的图片做背景,这样你就更容易知道什么是遮罩了,可见,我以蓝色做为遮罩色,当字在背景为蓝色的地方就不见了,而如果我以白色做为遮罩色的话,你会看见一个五彩缤纷的字,就好像一个被挖空的字。

十二、Shadow 滤镜

  Shadow滤镜其实和 DropShadow 很相像,也是给被作用的HTML元件对象产生下落式的阴影效果。但是,两者所不同的是,DropShadow 没有渐进感,而Shadow则有渐进阴影感,看起来就更真实一些。我们可以先看一下它的效果:

Shadow 滤镜展示

  感觉如何?是不是很有立体感,这就是Shadow滤镜,好了,让我们来看看它的参数:

参数名

说明

取值说明

Color

阴影的颜色 #RRGGBB 格式的颜色值。

Direction

设置模糊的方向。 0(上),45(右上),
90(右),135(右下),
180(下),225(左下),
270(左),315(左上)。

  刚才上面那个效果的代码是:

<h2 Style="FILTER:Shadow(Color=#808080, Direction=135);height=30" align="center">
<font face="楷体_GB2312" color="#0000FF">Shadow 滤镜展示</font></h2>

  你可以试试把这个效果作用在一幅图片上,要是有一幅透明的GIF图片就更酷了。试试吧!

十三、Wave 滤镜

  顾名思义,Wave滤镱可以让HTML元件对象在垂直方向上产生波浪的变形。以下是它的参数:

参数名

说明

取值说明

Add

表示是否在已经使用了Wave滤镜的元件对象上显示原对象。 0表示不显示;
非0表示要显示原对象。
Freq 设置波动的个数。 自然数。
LightStrength 设置波浪效果的光照强度。 从0到100。0表示最弱,100表示最强。
Phase 波浪的起始相角。 从0到100的百分数值。例如:25相当于90度,而50则相当于180度。
Strength 设置波浪摇摆的幅度。 自然数。

  这里要注意的是Phase参数,它是以正弦波的波形当做初始波形,当设置了相角后,也就是把一个正弦波向左移一段距离。什么是相角呢?这是在高中的数学课里就已经讲过了哦!在这里我就不多说了。

  好了,让我们来看一下该滤镜的示例:

你看到波浪文字了吗?是不是比较不错?

以下是上面效果的代码:

<img SRC="photo.jpg"
style="filter:wave(strength=12, freq=8,lightstrength=10, add=0, phase=0)"> </p>

<h1 style="filter:wave(strength=5, freq=2, lightstrength=30, add=0, phase=90);height=1"
align="center"><font face="楷体_GB2312" color="#FF0000">你看到波浪文字了吗?是不是比较不错?</font></h1>

  我们看见那个图片的波浪不是很好看,最好用一幅透明的GIF图片,一定会有更好的效果的。



编辑制作:常青树




 

双击自动滚屏 【打印本页】 【关闭窗口

上篇文章:网页背景色,如何用代码实现

下篇文章:再现琼瑶影视经典名曲 刘紫玲《又见知音16 影视之歌》 320Kbps/mp3

 相关评论:

没有相关评论

 发表评论:

身份选择:会员 游客(游客不需要输入密码)
用 户 名: 密 码:
评论内容:
(最多评论字数:500)

汕头港湾(二站) | 设为首页 | 加入收藏 | 联系我们 | 进入管理 | 关于站长 | 本站搜索

联系电话:491341756 联系人:常青树

琼icp备09005167