Dreamweaver教程 FrontPage教程 Flash教程
  • CSS教程
  • javascript教程
    当前位置:教程 > 网页制作 > CSS教程 > 正文

    CSS 滤镜应用集锦 -- 巧用CSS的 alpha 滤镜

    编辑:教程网 来源:网络 时间:2011年09月19日 15:43
    “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 >上,能产生一些奇妙的效果,请看下图:

    上面的三种效果除“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、透明度的大小要根据具体情况仔细调整,取一个最佳值。

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

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

    三、仿电视效果
    请下面的效果图:

    由于该效果是动态的,制作方法如下:
    1、插入一个1*1的表格,并用一张图片作为表格的背景。
    2、我们把单元格的背景设置为白色,并在表格的单元格上加载一个alpha滤镜,滤镜代码为:.alpha1 {filter:alpha(opacity=50) },这里滤镜的其它参数取默认值。
    3、用鼠标在表格的单元格中点一下,然后点击主菜单的“Insert”,并在其下拉出的菜单中选择“Layer”子菜单,插入一个层(我们称其为:layer1)。我们再次点击主菜单的“Insert”,并在其下拉出的菜单中选择“Layer”子菜单,再插入一个层(我们称其为:layer2)。
  • 原文来自 教程网 转载请注明:http://www.websmill.com/wangye/css/23981.html

  • 上一篇:CSS 滤镜应用集锦 -- 巧用CSS的 Glow 滤镜
  • 下一篇:CSS 滤镜应用集锦 -- 巧用CSS的 Dropshadow 滤镜