Dreamweaver MX 2004 CSS使用教程之CSS滤镜介绍

2008-02-23 06:57:09来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折

  本站原创内容,转载请注明出处网页教学网

  十.CSS 滤境的详细介绍1

  ALPHA 属性

  【Alpha滤镜属性】这个名字,在Flash和Photoshop经常见到。它们的作用基本类似,就是把一个目标元素与背景混合。你可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标,可以指定点、线、面的透明度。由于“Alpha”滤镜的参数多,我们先来看一下下图:

  “opacity”:代表透明度程度。范围是从0~100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。

  “finishopacity”:是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。

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

  “StartX”和“StartY”:代表渐变透明效果的开始X和Y坐标。

  “FinishX”和“FinishY”:代表渐变透明效果结束X和Y坐标。

  BLENDTRANS 属性

  【BlendTrans属性】淡入淡出的效果滤镜,能产生极精细的图片转换效果。

BlendTrans滤镜功能也比较单一,只有一个参数:Duration(变换时间)。需要借助于 Javascript来调用它的方法来实现转换功能。使用BlendTrans滤镜,首先您要准备几张宽高尺 寸相同的图片,并分别命名,保存在图像目录下,如:images/*.jpg。如果用4幅的话,分别 取名为:blen1.jpg; blen2.jpg; blen3.jpg;blen4.jpg。

  BLUR属性

  【Blur属性】把Blur滤镜加载到文字上,可产生立体字的效果,加载到图片上,可以产生风吹模糊效果。不仅美化了网页,也为你的网页减轻了分量。

  下面介绍一下Blur滤镜的参数,以便你灵活应用:

  Add:是否让Blur滤镜起作用,Add=False(或“0”)时Blur滤镜不起作用,取True(或非“0”值)时Blur滤镜起作用,只有两个值,即true和false;

  Direction:阴影的方向,取值范围0~360度,45度一个间隔,所以实际上只有八个方向值;

  Strength:它代表有多少个像素的宽度成为阴影,你也可以简单地理解为阴影的长度。它只能用整数来指定,默认值是5个像素,你可以根据实际需要来指定阴影的长度。我上面的两个图片例子是用的同一个滤镜,Strength是10个像素。同一网页中对不同的对象可以使用不同参数的Blur滤镜,你只要给它们取不同的名称就行了。

  CHROMA 属性

  【Chroma属性】 Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下:

  Filter:Chroma(color=color)

  这个属性的表达式是不是很简单,它只有一个参数。只需把您想要指定透明的颜色用 Color参数设置出来就可以了。

  DROPSHADOW 属性

  【DropShadow属性】作用是添加对象的阴影效果。实际效果看上去就象是原来的对象离开了页面,然后在页面上显示出该对象的投影。其工作原理是建立一个偏移量,然后加上颜色。

  Dropshadow滤镜有四个参数,它们的含义为:

  “Color”:代表投射阴影的颜色。

  “offx”和“offy”:分别是X方向和Y方向阴影的偏移量,它必须用整数值,如果是正整数,那么表示阴影向X轴的右方向和Y轴的下方向。若是负整数值,阴影的方向正好相反。另外“offx”和“offy”数值的大小决定了阴影离开对象的距离;

  “Positive”参数:如果为“true(非0)”,那么就为任何的非透明像素建立可见的投影。如果为“fasle(0)”,那么就为透明的像素部分建立透明效果。

  对文字加载Dropshadow滤镜比较方便的办法,是把Dropshadow滤镜加载到文字所在的表格单元格< td >上。文字比较小时,使用Dropshadow的效果不太理想,所以一般用于制作稍大的标题字。

  Dropshadow滤镜对一般图片无效,但我们把图片放到表格中,再给表格的<td>加载 Dropshadow滤镜,将会产生一种图片有了立体边框的效果。

  FLIPH 属性

  【FlipV 属 性】FlipV是一个垂直翻转对象的滤镜,当把FlipV加载到一个对象上,该对象将产生一个垂直镜象,以此来创造垂直翻转的效果;它是无参数滤镜之一。功能单一,使用方便,效果显著。

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Dreamweaver MX 2004 CSS使用教程之CSS扩展属性

下一篇:Dreamweaver MX 2004 CSS使用教程之滤镜介绍2