今天是:
设为首页 加入收藏
  首页  文章  下载  小说  幽默  IT  QQ家园  小店  FLASH  汽车  
您现在的位置: 星雨小站 >> 文章 >> 电脑技术 >> 网页制作 >> CSS >> 文章正文 用户登录 新用户注册
[组图]CSS教程-滤镜(alpha属性 )         ★★★★★
CSS教程-滤镜(alpha属性 )
作者:小雨 文章来源:洪恩在线 点击数: 更新时间:2005-4-20 21:02:06

  alpha是来设置透明度的。先来看一下它的表达格式:

  filter:alpha(opacity=opcity,finishopacity=finishopacity,
  style=style,startX=startX,startY=startY,finishX=finishX,
  finishY=finishY)

  哇,怎么这么长。是啊,不过这些参数都各有其用。
  Opacity代表透明度等级,可选值从0到100,0代表完全透明,100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状;1代表线形;2代表放射状;3代表长方形。
  Finishopacity是一个可选项,用来设置结束时的透明度,从而达到一种渐变效果,它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标,finishX和finishY代表渐变透明效果的结束坐标。
  从上面讲的我们可以看出,如果不设置透明渐变效果,那么只需设置opacity这一个参数就可以了。说了这么多,我们来看一个实例吧(见下图):

透明效果

  实现上面这种效果的代码如下:

  <html>
  <head>
  <title>alpha</title>
  <style>//*定义CSS样式*//
  <!--
  div{position:absolute; left:50;top:70; width:150; }
  //*定义DIV区域内的样式(位置为绝对定位,left、top、width的坐标)*//
    img{position:absolute;top:20;left:40;
  filter:alpha(opacity=80)}
  //*定义图片的样式,绝对定位,滤镜属性是透明度为80*//
  -->
  </style>
  </head>
  <body>
  <div>
  <p style=“font-size:48;font-weight:bold;color:red;”>
  Beautiful </p>//*定义字体属性,前景色为红色*//
  </div>
  <p><img src=“ss01076.jpg”> </p>
  //*导入一张图片*//
  </body>
  </html>

  如果在上面的代码中稍做改动,则将产生另外多种效果。我们只修改img的样式属性,把head中的Img样式属性代码改为如下所示:

  img{position:absolute;top:20;left:40;
  filter:alpha(opacity=0,finishopacity=100,
  style=1,startx=0,starty=85,finishx=150,finishy=85);}
  //*设置透明渐变效果,起始坐标,终止渐变坐标,并设置透明样式值(style=1)为   线形*//

  这段代码产生的效果如左下图所示,右面的两幅图分别是把Alpha中的Style参数值为2和3后的效果

style=1时的效果 style=“2”时的效果 style=3时的效果

          Style=1            Style=2                Style=3

  以上是CSS的Alpha滤镜属性的应用,具体应用还需要您自己找个例子练一练。
  下一节我们将介绍blur(模糊)属性。

-

中搜索与
的相似内容
立刻搜索→

文章录入:admin    责任编辑:小雨 
  • 上一篇文章:

  • 下一篇文章:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口



    推荐文章[组图]无损硬盘数据调整…
    普通文章上线[问好,打招呼] QQ表…
    普通文章拜拜[再见,晚安,下线] …
    普通文章钱[钞票,大款] QQ表情
    普通文章[组图]应知应会的5个图…
    普通文章跟我学用“记事本”
    普通文章用好Windows自带的录音…
    普通文章来测试你的网速-比比看…
    推荐文章文件夹加密过程中因误操…
    推荐文章[组图]无损硬盘数据调整…
    推荐文章能够安装多个杀毒软件吗…
    推荐文章爱情专用系列 QQ表情
    推荐文章用画图工具给图片添加文…
    推荐文章老公增加零花钱的请示报…
    推荐文章QQ搞笑表情(二) QQ表情
    推荐文章悠嘻猴 QQ表情
    Fireworks绘制水粉画
    关于星光的制作
    Fireworks中毛笔字条幅…
    Fireworks MX 按图索金…
    用 Fireworks MX 锻造…
    透明胶带的制作
    “挥”出个精彩!乒乓…
    新手入门:FW雪花飘飘迎…
    Excel 2000表 格 制 作
    Excel 2000强大的计算…
    Excel 2000丰富的图表
    Excel 2000数据库管理
    Excel 2000分析与决策
    Excel 2000数据共享与…
    鼠标的使用

    糯米猪系列 QQ表情

    愚人节qq表情 QQ表情

    花脸猫系列 QQ表情

    uc表情系列 QQ表情
    (只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    版权所有 Copyright© 2004-2005 星空联盟工作室 EMAIL:xingyu@xyu01.com
    给我发消息 给我发消息

    本站Alaxa全球网站排名 (点击查看)(安装Alexa工具条,查看各大网站全球排名)