当前位置 : 主页 > 网络编程 > 其它编程 >

CSS中的Filter样式特效1

来源:互联网 收集:自由互联 发布时间:2023-07-02
从IE4.0版开始就提供了一些内置的多媒体滤镜特效正是由于这些基于CSS的样式属性的控制于是我们在编写网页的时候即使 从IE 4.0版开始就提供了一些内置的多媒体滤镜特效正是由于这些
从IE4.0版开始就提供了一些内置的多媒体滤镜特效正是由于这些基于CSS的样式属性的控制于是我们在编写网页的时候即使 从IE 4.0版开始就提供了一些内置的多媒体滤镜特效正是由于这些基于CSS的样式属性的控制于是我们在编写网页的时候即使我们不用图片也可以使我们的文字图片按钮或是DIV标识鲜艳无比充满生气从而为自己的网页增加了比较美妙的视觉效果。 下面我们就来看看CSS的Filter样式。这里即使你没有CSS这方面的知识相信以下的内容也不会很难懂的。当然首先我默认你已经学过HTML并且还能做网页最好是还知道一点Scripts语句。由于各种浏览器对CSS的支持的原因我建议你使用IE4.0以上版的浏览器强烈建议你使用IE5.0版这样你就会毫不费力地看到所有的特效。

  一、建立Filter样式

  Filter既然是CSS样式表中的一员那么它就可以像其它样式的定义和应用方式一样可能直接定义在职HTML标识的和只间。其语法结构为

filter名称(参数及其值)

 例如imgblur { filter : Blur( strength30 ) }

 当然它也可以通过Style标识定义在HTML的标识里面如

  以上就是使用CSS中filter样式的使用方法其实这和其它CSS的样式定义方式一样分为外部引用、内部引用和局部引用三种上面的第一种是内部引用第二种是局部引用外部引用则要先建立一个CSS的文件然后用来嵌入HTML文件。有关CSS的定义方式请大家参考网页陶吧里的相关文章。

  Filter样式属性允许一次设定多个滤镜效果也就是说可以让一个HTML的元件同时拥有多个滤镜的的效果。例如 …… ……               …… ……

  在以上的例子中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到1000表是完全透明100表示完全不透明。

FinishOpacity

这是一个同Opacity一起使用的选择性的参数当同时Opacity和FinishOpacity时可以制作出透明渐进的效果比较酷。从0到1000表是完全透明100表示完全不透明。

Style

当同时设定了Opacity和finishOpacity产生透明渐进时它主要是用赤指定渐进的显示形状。0没有渐进1直线渐进 2圆形渐进3矩形辐射。

StartX

渐进开始的 X 坐标值

StartY

渐进开始的 Y 坐标值

FinishX

渐进结束的 X 坐标值

FinishY

渐进结束的 Y 坐标值

  看一下下面的演示你就知道了

              原图     Style0     Style1     Style2     Style3                                   

原图

style0

style1

style2

style3

网友评论