HTML基础 5-Css的滤镜效果.docVIP

Css的滤镜效果 使用Css的滤镜能使文字产生一种类似图像的效果，但比起图片来可就瘦小多了。这里简单地介绍各个滤镜地定义形式和功能，并给出一个用滤镜实现地网页特殊效果。关于滤镜的使用，内容不仅局限于这里讲到地内容，大家可以查看专业书籍深入学习。 CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象，我们先来看一下它的书写格式： 　　 filter：filtername（parameters） Filter是滤镜属性选择符。也就是说，只要进行滤镜操作，就必须先定义filter；filtername是滤镜属性名，这里包括alpha、blur、chroma等等多种属性，详细内容请看下表： 上面filter表达式中括号内的parameters是表示各个滤镜属性的参数，也正是这些参数决定了滤镜将以怎样的效果显示。 (color=#rrggbb)} 该功能类似面具，它地作用是为网页上的html元件对象做出一个矩形的遮罩，遮住没有文字部分的背景，显示为滤镜颜色，使文字部分透过背景。 下面的程序用mask滤镜实现了多色文字效果，这里用了白色滤镜，其代码是：.mask1{filter:mask (color=#ffffff)}，五彩缤纷的文字颜色实际上就是背景颜色。其制作方法很简单，就是插入一个1*1的表格，给表格加上多彩的背景图片，然后在表格中输入文字，给单元格加载一个mask滤镜即可。 例：cssmask.htm 2. blur滤镜 格式：.blur{filter:blur(add=#,direction=#,strength=#)} Blur滤镜的功能是：把它加载到文字上，产生立体字的效果。这将为在网页上添加立体字标题带来方便，也为网页减轻了分量；把blur滤镜加载到图片上，可以使图片增色不少，虽然用图像处理软件也能达到同样效果，但用blur滤镜要方便。 Add参数有两个参数值：true和false。意思是指定图片是否被改变成效果。Direction参数用来设置的方向。效果是按照顺时针方向进行的。其中0度代表垂直向上，每45度一个单位，默认值是向左的270度。Strength参数值只能使用整数来指定，它代表有多少像素的宽度将受到影响。默认值是5像素。shadow1{filter:dropshadow(color=#,offx=#,offy=#,positive=#)} DropShadow属性是为了添加对象的阴影效果的。它实现的效果看上去就像使原来的对象离开页面，然后在页面上显示出该对象的投影。该属性一共有四个参数： Color代表投射阴影的颜色。Offx和ffy分别X方向和Y方向阴影的偏移量偏移量必须用整数值来设置。如果设置为正整数，代表X轴的右方向和Y轴的向下方向。设置为负整数则相反。Positive参数有两个值：True为任何非透明像素建立可见的投影，False为透明的像素部分建立可见的投影。 例子：cssdropshadow.htm.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滤镜使用当前元素部分透明，该元素下层的内容的颜色对整个效果起着重要作用，因此颜色的合理搭配相当重要。 格式：.glow1{filter:glow(color=#rrggbb,strength=#)} glow功能当对一个对象使后，这个对象的边缘就会产生类似发光的效果。 Glow属性的参数： Color是指定发光的颜色. Strength指定发光的强度，参数值从1到255。可简单理解为光芒的长度。 .wave1{filter:wave(add=#,freq=#,lightstrength=#,phase=#,strength=#)} Wave功能：把对象按照垂直的波形样式扭曲，从而产生一种类似“波浪”的效果。 各参数含义： add参数有两个参数值：True代表把对象按照波