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

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

　　十.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
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有