中国设计联盟
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 签名设计 虚拟主机 域名注册 acg王国 ACG玩家
求创科技
上海网麒科技
中国福网
数字引擎
招聘求职
中国互联
时代互联
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> CSS:alpha滤镜

CSS:alpha滤镜 (1)

来源:中国设计秀    作者:    点击:327     加入收藏
中国品牌设计网
    “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 >
0
顶一下
[1] [2]
2007-10-22 12:39:00    出处: