[07/04][交流]CSS滤镜运用——ALPHA（透明滤镜）

happy-yan

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代表渐变透明效果的结束坐标。
效果图	代码
	<img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=25, finishopacity=100, style=0, startX=0, startY=0, finishX=50, finishY=50) " width=350>
	<img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=0, finishopacity=100, style=1, startX=0, startY=0, finishX=50, finishY=50) " width=350>
	<img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=0, finishopacity=100, style=2, startX=0, startY=0, finishX=50, finishY=50) " width=350>
	<img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=0, finishopacity=100, style=3, startX=0, startY=3, finishX=50, finishY=50) " width=350>
还有一个简单一些的表达方式，请看如下效果和代码：
效果图	代码
	<img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=100, style=0) " width=350>
	<img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=100, style=1) " width=350>
	<img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=100,style=2) " width=350>
	<img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=100, style=3) " width=350>

月儿

^^ thx happy!!

不弃

谢谢老师唷.......

[ 本帖最后由 不弃 于 2006-7-4 21:52 编辑 ]

happy-yan

不弃真用心，将来一定是个CSS高手^^

绯舞

认真学习中~~