HTML基础 5Css的滤镜效果.docx

Css的滤镜效果

使用Css的滤镜能使文字产生一种类似图像的效果，但比起图片来可就瘦小多了。这里简单地介绍各个滤镜地定义形式和功能，并给出一个用滤镜实现地网页特殊效果。关于滤镜的使用，内容不仅局限于这里讲到地内容，大家可以查看专业书籍深入学习。

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

filter：filtername（parameters）

Filter是滤镜属性选择符。

也就是说，只要进行滤镜操作，就必须先定义filter；filtername是滤镜属性名，这里包括alpha、blur、chroma等等多种属性，详细内容请看下表：

上面filter表达式中括号内的parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。

mask滤镜

格式：.mask1{filter:mask(color=#rrggbb)}

该功能类似面具，它地作用是为网页上的html元件对象做出一个矩形的遮罩，遮住没有文字部分的背景，显示为滤镜颜色，使文字部分透过背景。

下面的程序用mask滤镜实现了多色文字效果，这里用了白色滤镜，其代码是：.mask1{filter:mask(color=#ffffff)}，五彩缤纷的文字颜色实际上就是背景颜色。其制作方法很简单，就是插入一个1*1的表格，给表格加上多彩的背景图片，然后在表格中输入文字，给单元格加载一个mask滤镜即可。

例：cssmask.htm

blur滤镜

格式：.blur{filter:blur(add=#,direction=#,strength=#)}

Blur滤镜的功能是：把它加载到文字上，产生立体字的效果。这将为在网页上添加立体字标题带来方便，也为网页减轻了分量；把blur滤镜加载到图片上，可以使图片增色不少，虽然用图像处理软件也能达到同样效果，但用blur滤镜要方便。

Add参数有两个参数值：true和false。意思是指定图片是否被改变成投影效果。

Direction参数用来设置投影的方向。投影效果是按照顺时针方向进行的。其中0度代表垂直向上，每45

度一个单位，默认值是向左的270度。

Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到投影影响，即影子浓度。默认值是5像素。

例子：cssblur.htm

dropshadow滤镜

格式：.shadow1{filter:dropshadow(color=#,offx=#,offy=#,positive=#)}

DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。

该属性一共有四个参数：

Color代表投射阴影的颜色。

Offx和Offy分别X方向和Y方向阴影的偏移量，偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。

Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。

例子：cssdropshadow.htm

alpha滤镜

格式：

.alpha1{filter:alpha(opacity=10,finishopacity=90,style=1,startx=0,starty=0,finishx=100,finishy=100)}

alpha滤镜的功能：把一个目标元素与背景混合，可以指定数值来控制混合的程度，这种“与背景混合”，通俗的说就是一个元素的透明度。通过指定坐标，可以指定点、线、面的透明度。

Opacity：代表透明程度。范围是0～100，是百分比的形式，也就是说，0代表完全透明，100代表完全不透明。

Finishopacity：是一个可选参数，如果想要设置渐变的透明效果，可以使用它来指定结束时的透明度，范围0～100

Style：指定了透明区域的形状特征。其中，0代表统一形状、1代表线形、2代表放射状、3代表长方形。

StartX和StartY代表渐变透明效果的开始坐标。finishX和finishY代表渐变透明效果的结束坐标。

注意使用alpha滤镜时要注意：

由于alpha滤镜使用当前元素部分透明，该元素下层的内容的颜色对整个效果起着重要作用，因此颜色的合理搭配相当重要。

透明度的大小要根据具体情况仔细调整，取一个最佳值。例子：cssalpha.htm

glow滤镜

格式：.glow1{filter:glow(color=#rrggbb,strength=#)}

gl