CSS滤镜(最新整理版).pdfVIP

1、概述

好了，下面我们将进入CSS的最精彩的部分--滤镜，它将把我们带入绚丽多

姿的多媒体世界。正是有了滤镜属性，页面才变得更加美丽。

CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象，我们先来看

一下它的书写格式：

filter：filtername（parameters）

怎么样？是不是很简洁，看上去及前面讲的属性定义没什么太大的差别。

Filter是滤镜属性选择符。

也就是说，只要您进行滤镜操作，就必需先定义filter；filtername是滤镜属

性名，这里包括alpha、blur、chroma等等多种属性，具体内容请看下表：

上面filter表达式中括号内的parameters是表示各个滤镜属性的参数，也

正是这些参数确定了滤镜将以怎样的效果显示。

看了上面长长的列表，是不是觉得很困难呀？没关系，我们接下来一个一个的介

绍这些属性在CSS中是怎样实现的（很简洁哟^_^）。

下一节我们将首先学习Alpha透亮属性的应用。

2、alpha属性

alpha是来设置透亮度的。先来看一下它的表达格式：

filter：alpha（opacity=opcity，finishopacity=finishopacity，

style=style，startX=startX，startY=startY，finishX=finishX，

finishY=finishY）

哇，怎么这么长。是啊，不过这些参数都各有其用。

Opacity代表透亮度等级，可选值从0到100，0代表完全透亮，100代表完全不

透亮。Style参数指定了透亮区域的形态特征。其中0代表统一形态；1代表线

形；2代表放射状；3代表长方形。

Finishopacity是一个可选项，用来设置结束时的透亮度，从而达到一种渐变效

果，它的值也是从0到100。StartX和StartY代表渐变透亮效果的起先坐标，

finishX和finishY代表渐变透亮效果的结束坐标。

从上面讲的我们可以看出，假如不设置透亮渐变效果，那么只需设置opacity这

一个参数就可以了。说了这么多，我们来看一个实例吧（见下图）：

实现上面这种效果的代码如下：

html

head

titlealpha/title

style//*定义CSS样式*//

!--

div{position：absolute；left：50；top：70；width：150；}

//*定义DIV区域内的样式（位置为肯定定位，left、top、width的坐标）*//

img{position：absolute；top：20；left：40；

filter：alpha(opacity=80)}

//*定义图片的样式，肯定定位，滤镜属性是透亮度为80*//

--

/style

/head

body

div

pstyle=“font-size：48；font-weight：bold；color：red；”

Beautiful/p//*定义字体属性，前景色为红色*//

/div

pimgsrc=“ss01076.jpg”/p

//*导入一张图片*//

/body

/html

假如在上面的代码中稍做改动，则将产生另外多种效果。我们只修改img的

样式属性，把head中的Img样式属性代码改为如下所示：

img{position：absolute；top：20；left：40；

filter：alpha(opacity=0,finishopacity=100,

style=1,startx=0,starty=85,finishx=150,finishy=85);}

//*设置透亮渐变效果，起始坐标，终止渐变坐标，并设置透亮样式值

（style=1）为线形*//

这段代码产生的效果如左下图所示，右面的两幅图分别是把Alpha中的

Style参数值为2和3后的效果，点击缩略图可放大。

Style=1Style=2Style=3

以上是CSS的Alpha滤镜属性的应用，具体应用还须要您自己找个例子练一

练。

下一节我们将介绍blur（模糊）属性。

3、blur属性

假如您用手在一幅还没干透的油画上快速划过，画面就会变得模糊。CSS下

的blur