巧用CSS的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 的坐标。
　　好了，讲了一堆参数，我们来做几个实例试试：

一、特殊的文字效果
　　把“Alpha”滤镜加载到文字所在的< td >上，能产生一些奇妙的效果，请看下图：
图1
图2
图3

　　上面的三种效果除“Style”参数不同外，其它参数均相同。图1的代码是： Alpha(Opacity=10, FinishOpacity=90, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=100)；
　　图2的滤镜代码为：Alpha(Opacity=10, FinishOpacity=90, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)；
　　图3的滤镜代码为：Alpha(Opacity=10, FinishOpacity=90, Style=3, StartX=0, StartY=0, FinishX=100, FinishY=100)；
　　在使用“Alpha”滤镜时要注意：
　　1、由于“Alpha”滤镜使当前元素部分透明，该元素下层的内容的颜色对整个效果起着重要作用，因此颜色的合理搭配相当重要；
　　2、透明度的大小要根据具体情况仔细调整，取一个最佳值。

二、新颖别致的跑马灯
　　跑马灯特效在现在的网站已司空见惯了，但象下面这样淡入淡出的跑马灯还不多，请看下图：

　　图4　别致的跑马灯

　　用“Alpha”滤镜你也可以轻松地做出上面那种效果的跑马灯。具体制作方法如下：
　　1、插入一个一行一列的表格，把表格的背景设置为“#000000”；
　　2、在DW3中设置好alpha滤镜，具体的滤镜代码是：.alpha1 { filter: Alpha(Opacity=100, FinishOpacity=20, Style=2, StartX=0, StartY=0, FinishX=100, FinishY=100)}；
　　3、在表格中插入一个跑马灯，并在跑马灯中加入alpha滤镜，结束！这里要注意的是不要把“Alpha”滤镜加载到< td >上，而是要加载到跑马灯上，否则效果将在相径庭了。按F12看看吧。
　　若你手头没有跑马灯程序，我这里给出一个，省得你到处找，烦着呢！
< marquee border="0" class="alpha2" >跑马灯内容< /marquee >

三、仿电视效果
　　请下面的效果图：
　
　　图5、6　仿电视效果

　　由于该效果是动态的，上面是我抓的两张过程图片。制作方法如下：
　　1、插入一个1*1的表格，并用一张图片作为表格的背景。
　　2、我们把单元格的背景设置为白色，并在表格的单元格上加载一个alpha滤镜，滤镜代码为：.alpha1 {filter:alpha(opacity=50) }，这里滤镜的其它参数取默认值。
　　3、用鼠标在表格的单元格中点一下，然后点击主菜单的“Insert”，并在其下拉出的菜单中选择“Layer”子菜单，插入一个层（我们称其为：layer1）。我们再次点击主菜单的“Insert”，并在其下拉出的菜单中选择“Layer”子菜单，再插入一个层（我们称其为：layer2）。
　　4、我们称Layer1为Layer2的父层，那么Layer2就是Layer1的子层，注意：切不可用鼠标拖动Layer1。把Layer1的Width和Height均设置为“1”。把Layer2拖到表格上，并调整其大小与表格完全重合。
　　5、在Layer2上插入一个“ Marquee”（滚动字幕），按F12就能看到象上图那样的效果了。
　　本例的alpha滤镜使得背景图片看起来象被蒙上了一层薄纱，从而使得在其上面的文字能突出显示，这也是在电视中经常看到的效果。另外也请你注意一下3、4两步插入图层的技巧，这样插入的图层，无论你在其前后插入多少内容，它与背景图片的相对位置不变，它克服了在DW3中图层使用绝对坐标带来的定位不准的问题。

巧用CSS的alpha滤镜相关推荐

巧用CSS的Glow滤镜
作者:冯永曜对一个对象使用"glow"滤镜后,这个对象的边缘就会产生类似发光的效果,这种效果在PHTOSHOP中做起来都比较麻烦,而在DW3中用CSS的"glow&qu ...
巧用CSS的 Mask 滤镜
作者:冯永曜在网页制作中使用CSS,这已是众所周知,而关于CSS滤镜使用的却介绍得不多.其实,0CSS的滤镜在Dreamweaver3中用起来也很方便,且能使文字产生一种类似图象的效果,但比起图片来 ...
巧用CSS的Wave滤镜
作者:冯永曜 "wave"滤镜,看它的名称你可能就能想到其效果,正如你想的那样,它的作用是把对象按照垂直的波形样式扭曲,从而产生一种特殊的效果.它共有5个参数: "add ...
巧用CSS的BlendTrans滤镜
作者:冯永曜 BlendTrans滤镜比起上一篇介绍的Revealtrans滤镜来要简单一些,它只有一个参数:Duration 变换时间,它的功能也比较单一,就是产生一种淡入淡出的效果,不过它的这种效 ...
巧用CSS的RevealTrans滤镜
作者: 冯永曜 CSS的RevealTrans动态滤镜是一个神奇的滤镜,它能产生23种动态效果,更为奇妙的是它还能在23种动态效果中随机抽用其中的一种.用它来进行网页之间的动态切换,简直 ...
html探照灯效果,巧用CSS的MASK滤镜
Mask滤镜可以为网页上的HTML元件对象作出一个矩形遮罩,关于什么是遮罩?如果你用过Flash中的遮罩,你就会知道了,就是那个样子了.实际上对于遮罩你也可以这样来理解,相当于用一块有色布把物件盖起来 ...
巧用CSS的Light滤镜
作者: 冯永曜 Light滤镜能产生一个模拟光源的效果,但使用它要通过调用它的"方法(Method)"来实现,这就要用到一些Javascrpt知识,虽然有一点难度,但产生的效果也是 ...
巧用CSS的Border属性制作特效菜单
许多应用软件的主菜单都具有这样的效果,通常是暗色的,一旦鼠标移到菜单上,立即变明亮:鼠标不在菜单上时是平面的,一旦鼠标移到菜单上,菜单条立即变为立体,从而增强了菜单的效果.你是否也想使网页中的导航菜单 ...
巧用css的滤镜filter属性处理图片，高斯模糊，HTML页面黑白滤镜等
效果如下:使用css的filter滤镜属性.可以巧妙的设置图片高斯模糊和特效.包括灰色纪念清明节等悼念烈士英雄灰白效果. <img class='testimg' src="./img ...

巧用CSS的alpha滤镜

巧用CSS的alpha滤镜相关推荐

最新文章

热门文章