相关文章
科技时代网页爱好者必看-
网站建设给光标添加CSS样式
企通互联CSS打造一个超酷的具有立体感效果的导航
网站设计字符串对象
北京网站设计第九节 与Fireworks的集成
北京网站建设Flash处理XML文档数据教程
北京网页设计Flash MX 2004编程教程(一)
北京网站建设制作多语言支持的Flash应用程序
网页设计Dreamweaver基础视频教程13 查找和替换
企通互联HTML－加速、再加速
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> www.qitongnet.comwww.qitongnet.comCSS滤镜之alpha属性
www.qitongnet.comwww.qitongnet.comCSS滤镜之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代表长方形。 www.qitongnet.com网页设计
Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。 企通互联
从上面讲的我们可以看出，如果不设置透明渐变效果，那么只需设置opacity这一个参数就可以了。说了这么多，我们来看一个实例吧（见下图）：
实现上面这种效果的代码如下：
网站制作 <html> 北京网站设计
<head>北京网站制作
<title>alpha</title> 网页设计
<style>//*定义CSS样式*// 网页设计
<!-- 北京网站设计
div{position： 网页设计absolute； left：50；top：70； width：150； }www.qitongnet.com
//*定义DIV区域内的样式（位置为绝对定位，left、top、width的坐标）*//www.qitongnet.com
img{position：absolute；top：20；left：40；北京网站制作
filter：alpha(opacity=80)} 网站设计
//*定义图片的样式，绝对定位，滤镜属性是透明度为80*// 企通互联
--> 网页设计
</style> 网站设计
</head> 网站制作 北京网站建设
<body> www.qitongnet.com
<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
以上是CSS的Alpha滤镜属性的应用，具体应用还需要您自己找个例子练一练。
www.qitongnet.com北京网站设计