频道直达 - 学院 - 下载 - 交易 - 特效 - 字库 - 手册 -排名-工具- 繁體
网页教学网站开发 设为首页
加入收藏
联系我们
建站搜索: 常用广告代码   用户注册 | 用户登陆
您当前的位置:中国建站之家 -> 网站开发设计技术教程 -> HTML/CSS/DIV+CSS教程 -> CSS滤镜之alpha属性

CSS滤镜之alpha属性

作者:未知  来源:http://edu.chinaz.com  发布时间:2005-7-18 22:40:53  发布人:acx

减小字体 增大字体

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=http://edu.chinaz.com/Get/Website/Html_Css/“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

  以上是CSS的Alpha滤镜属性的应用,具体应用还需要您自己找个例子练一练。


将本文收藏到QQ书签与更多好友分享
[打 印]
[] [返回上一页] [收 藏]
下一篇文章:CSS滤镜之Xray属性
∷相关文章评论∷    (评论内容只代表网友观点,与本站立场无关!) [更多评论...]
精彩推荐
热门文章
· 注册码大全二
· 注册码大全四
· 注册码大全一
· 要10G免费网络硬盘的请进..
· 通过google 赶快来赚美金..
· 注册码大全十
· 头像-qq头像(qq新头像)4..
· 让你轻松架设FTP服务器1..
· 注册码大全三
· 梦幻背景图片7
· 卡通动物图片6
· 网页制作素材-按钮素材2..
· 让你轻松架设FTP服务器5..
· 风景图片8
· 注册码大全九
· 让你轻松架设FTP服务器2..
关注此文读者还看过
· 影响IIS性能的几个因素(..
· 百度联盟—何种做法会被..
· 用WinSock设计Chat程序
· 分析师调降低评级 Googl..
· Photshop为照片打造韩式..
· 服务器安全配置清单!
· [jsp+php]Windows2000 下..
· 从ASP迁移至ASP+ --处理..
· 爱客偶像网打造诚信交友..
· 2栏分页显示(附显示的形..
· 复制或传送SQL Server数..
· ASP Image 使用范例
· 利用CSS改善网站可访问性..
· ASP讲座之九:ASP与数据..
· Access数据库技术(21)
· 代理服务器Squid 使用详..
相关文章
· 巧用CSS滤镜制作绚丽图片播..
· CSS样式设计之CSS滤镜资料小..
· CSS滤镜:Gray属性
· CSS滤镜:颜色渐变
· 巧用CSS滤镜做图案文..
· CSS滤镜之Mask属性
· CSS滤镜之blur属性
· CSS滤镜之Chroma属性..
· CSS滤镜之DropShadow..
· CSS滤镜之FlipH、Fli..
· CSS滤镜之Glow属性
· CSS滤镜之Invert属性..
· CSS滤镜之Shadow属性..
· CSS滤镜之Wave属性
· CSS滤镜之Xray属性
关于本站 - 网站帮助 - 广告合作 - 下载声明 - 友情连接 - 网站地图 - 人才招聘
网站合作、内容监督、商务咨询:QQ: 9576619
Copyright ? 2005--2008 中国建站之家版权所有
粤ICP备05092265号