当前位置：网络学院首页 >> 设计教程 >> web标准 >> CSS:alpha滤镜

CSS:alpha滤镜 (1)

来源：中国设计秀作者：点击：842 加入收藏

“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 >

顶一下

[1] [2]

2007-10-22 12:39:00 出处：

本文引用地址：http://www.cnwebshow.com/edu/html/article_1428.html

热点文章/相关文章

素材下载　矢量潮流素材背景素材模板