[07/04][交流]CSS滤镜运用——ALPHA（透明滤镜）
<table border=1 cellspacing=5 cellpadding=5 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/02/0b6.gif width=750><TR><TD width=100% colspan=2><BR>
<font size=3 color=purple><b> alpha是来设置透明度的。先来看一下它的表达格式：<BR><BR>
filter: alpha(opacity=opcity, finishopacity=finishopacity,style=style, startX=startX, startY=startY, finishX=finishX,finishY=finishY)
<BR><BR>
哇，怎么这么长。是啊，不过这些参数都各有其用。
<BR><BR>
Opacity代表透明度等级，可选值从0到100，0代表完全透明，100代表完全不透明。 Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。
<BR><BR>
Finishopacity是一个可选项，用来设置结束时的透明度，从而达到一种渐变效果，它的值也是从0到100。 StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。</b></font>
<BR><BR>
<TR><TD width=50%><center><font size=3 color=purple><b>效果图</b></font></center></TD>
<TD width=50%><center><font size=3 color=purple><b>代码</b></font></center></td>
</TR>
<TR><TD width=50%><center><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></center></TD>
<TD width=50%><center><textarea rows=10 cols=55><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></textarea></center></td>
</TR>
<TR><TD width=50%><center><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></center></TD>
<TD width=50%><center><textarea rows=10 cols=55><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></textarea></center></td>
</TR>
<TR><TD width=50%><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></TD>
<TD width=50%><center><textarea rows=10 cols=55><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></textarea></center></td>
</TR>
<TR><TD width=50%><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=0, finishX=50,finishY=50) " width=350></TD>
<TD width=50%><center><textarea rows=10 cols=55><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></textarea></center></td></TR>
<TR><TD colspan=2><BR><BR><BR>
<font size=3 color=purple><b> 还有一个简单一些的表达方式，请看如下效果和代码：</b></font></TD></TR>
<TR><TD width=50%><center><font size=3 color=purple><b>效果图</b></font></center></TD>
<TD width=50%><center><font size=3 color=purple><b>代码</b></font></center></td>
</TR>
<TR><TD width=50%><center><img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=100, style=0) " width=350></center></TD>
<TD width=50%><center><textarea rows=10 cols=55><img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=100, style=0) " width=350></textarea></center></td>
</TR>
<TR><TD width=50%><center><img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=100, style=1) " width=350></center></TD>
<TD width=50%><center><textarea rows=10 cols=55><img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=100, style=1) " width=350></textarea></center></td>
</TR>
<TR><TD width=50%><img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=100, style=2) " width=350></TD>
<TD width=50%><center><textarea rows=10 cols=55><img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=100,style=2) " width=350></textarea></center></td>
</TR>
<TR><TD width=50%><img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=100, style=3) " width=350></TD>
<TD width=50%><center><textarea rows=10 cols=55><img src=http://www.pconline.com.cn/pcedu/photo/0509/pic/050926mirror07.jpg style="filter: alpha(opacity=100,style=3) " width=350></textarea></center></td></TR>
</td></tr></table> ^^ thx happy!! <TABLE cellSpacing=20 align=center background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/01/236fb179.gif border=10><TBODY><TR><TD><CENTER><TABLE cellSpacing=10 background=http://i17.photobucket.com/albums/b51/lyh_/MATERIAL/bg/01/1901336a.gif border=40><TBODY><TR><TD>
<br>
<img src=http://bbs.xyhc.com/attachments/month_0604/3_NJO0DljuB2cU.gif style="filter: alpha(opacity=100,style=2) " width=350><br>
<br>
<img src=http://www.xyhc.com/attachments/month_0606/2_7GbDRIR6rcEB.gif style="filter: alpha(opacity=100,style=2) " width=350><br>
<br>
http://www.5x51.com/bbs/Skins/Default/emot/em23.gifhttp://www.5x51.com/bbs/Skins/Default/emot/em23.gifhttp://www.5x51.com/bbs/Skins/Default/emot/em23.gifhttp://www.5x51.com/bbs/Skins/Default/emot/em23.gifhttp://www.5x51.com/bbs/Skins/Default/emot/em23.gifhttp://www.5x51.com/bbs/Skins/Default/emot/em23.gif<br>
<br>
谢谢老师唷.......<br>
<br>
<EMBED id=MediaPlayer374 src=http://www.yqbeier.com/mtw/10wushengdeyu.mp3 width=500 height=3 type=audio/mpeg loop="1" autostart="1"></EMBED>
</TD></TR></TBODY></TABLE></CENTER></TD></TR></TBODY></TABLE><BR>
[ 本帖最后由 不弃 于 2006-7-4 21:52 编辑 ] 不弃真用心，将来一定是个CSS高手^^ 认真学习中~~
页:
[1]