?? ◤css教程_濾鏡_alpha屬性--▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.htm
字號:
style="FONT-SIZE: 11pt"> 實現(xiàn)上面這種效果的代碼如下：</SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> <FONT color=#006666><html>
<BR> <head><BR> <title>alpha</title>
<BR> <style></FONT><FONT color=#cc33cc>//*定義CSS樣式*//</FONT>
<BR> <FONT color=#006666><!-- <BR> div{position：absolute；
left：50；top：70； width：150； }</FONT><BR> <FONT
color=#cc33cc>//*定義DIV區(qū)域內(nèi)的樣式（位置為絕對定位，left、top、width的坐標(biāo)）*//</FONT><BR> <FONT
color=#006666>img{position：absolute；top：20；left：40；<BR> filter：alpha(opacity=80)}</FONT>
<BR> <FONT color=#cc33cc>//*定義圖片的樣式，絕對定位，濾鏡屬性是透明度為80*//
</FONT><BR> <FONT color=#006666>--> <BR> </style>
<BR> </head> <BR> <body> <BR> <div>
<BR> <p
style=“font-size：48；font-weight：bold；color：red；”><BR> Beautiful
</p></FONT><FONT color=#cc33cc>//*定義字體屬性，前景色為紅色*//</FONT>
<BR> <FONT color=#006666></div> <BR> <p><img
src=“ss01076.jpg”> </p></FONT><BR> <FONT
color=#cc33cc>//*導(dǎo)入一張圖片*//</FONT> <BR> </SPAN><FONT
color=#006666><SPAN style="FONT-SIZE: 11pt"></body>
<BR> </html></SPAN></FONT></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><FONT color=#006666><SPAN
style="FONT-SIZE: 11pt"> </SPAN></FONT><SPAN
style="FONT-SIZE: 11pt"> 如果在上面的代碼中稍做改動，則將產(chǎn)生另外多種效果。我們只修改img的樣式屬性，把head中的Img樣式屬性代碼改為如下所示：</SPAN></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> <FONT
color=#006666>img{position：absolute；top：20；left：40；<BR> filter：alpha(opacity=0,finishopacity=100,<BR> style=1,startx=0,starty=85,finishx=150,finishy=85);}</FONT><BR>
</SPAN><FONT color=#cc33cc><SPAN
style="FONT-SIZE: 11pt">//*設(shè)置透明漸變效果，起始坐標(biāo)，終止?jié)u變坐標(biāo)，并設(shè)置透明樣式值（style=1）為 線形*//
</SPAN></FONT></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> 這段代碼產(chǎn)生的效果如左下圖所示，右面的兩幅圖分別是把Alpha中的Style參數(shù)值為2和3后的效果，點擊縮略圖可放大。</SPAN></P>
<P align=center><A
href="http://www.hongen.com/pc/homepage/css/img/css027.jpg"
target=_blank><SPAN style="FONT-SIZE: 11pt"><IMG height=97
alt=style=1時的效果
src="◤CSS教程_濾鏡_alpha屬性--▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/css0271.jpg" width=150
border=0 orig_onmouseout="null"
orig_onmouseover="null"></SPAN></A><SPAN
style="FONT-SIZE: 11pt"> <A
href="http://www.hongen.com/pc/homepage/css/img/css026.jpg"
target=_blank><IMG height=98 alt=style=“2”時的效果
src="◤CSS教程_濾鏡_alpha屬性--▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/css0261.jpg" width=150
border=0 orig_onmouseout="null"
orig_onmouseover="null"></A> </SPAN><A
href="http://www.hongen.com/pc/homepage/css/img/css025.jpg"
target=_blank><SPAN style="FONT-SIZE: 11pt"><IMG height=99
alt=style=3時的效果
src="◤CSS教程_濾鏡_alpha屬性--▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/css0251.jpg" width=150
border=0 orig_onmouseout="null"
orig_onmouseover="null"></SPAN></A></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> <FONT
color=#6666ff>Style=1</FONT> <FONT
color=#6666ff>Style=2 </FONT> </SPAN><FONT
color=#cc3399><SPAN style="FONT-SIZE: 11pt"> </SPAN><FONT
color=#6666ff><SPAN
style="FONT-SIZE: 11pt">Style=3</SPAN></FONT></FONT></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><FONT color=#cc3399><SPAN
style="FONT-SIZE: 11pt"> </SPAN></FONT><SPAN
style="FONT-SIZE: 11pt">以上是CSS的Alpha濾鏡屬性的應(yīng)用，具體應(yīng)用還需要您自己找個例子練一練。<BR> 下一節(jié)我們將介紹blur（模糊）屬性。</SPAN></P></TD></TR></TBODY></TABLE></DIV>
<P align=left> </P></LI></UL></TD></TR>
<TR>
<TD>
<P
align=center>
<A href="http://www.rr365.net/edu-css/css106.htm">上一節(jié)</A>|<A
href="http://www.rr365.net/edu-css/css106c.htm">下一節(jié)</A></P></TD></TR>
<TR>
<TD>
<HR width="75%" color=#e5ecf9>
<P align=center>網(wǎng)頁教程: <A
href="http://www.rr365.net/edu-asp/index.htm">ASP</A>| <A
href="http://www.rr365.net/edu-asp-net/asp-net.htm">ASP.net</A>| <A
href="http://www.rr365.net/edu-xml/xml.htm">XML</A>| <A
href="http://www.rr365.net/edu-php/php.htm">PHP4</A> | <A
href="http://www.rr365.net/edu-frontpage/frontpage.htm">FrontpageXP</A> |
<A
href="http://www.rr365.net/edu-dreamweaver/dreamweaver.htm">DreamWeaverMX</A></P>
<P
align=center>
<A href="http://www.rr365.net/edu-cplus/c.htm">C#</A>| <A
href="http://www.rr365.net/edu-jsp/jsp.htm">JSP</A> | <A
href="http://www.rr365.net/edu-javascript/javascript.htm">JavaScript</A> |
<A href="http://www.rr365.net/edu-vbscript/vbscript.htm">VBScript</A> | <A
href="http://www.rr365.net/edu-css/css.htm">CSS</A></P></TD></TR>
<TR>
<TD>
<HR width="50%" color=#e5ecf9>
<P> </P></TD></TR>
<TR>
<TD>
<FORM name=query0 action=http://www1.baidu.com/baidu method=get
target=_blank>
<DIV align=center><INPUT type=hidden value=baidu name=tn0> <A
href="http://www.baidu.com/"><IMG alt=Baidu
src="◤CSS教程_濾鏡_alpha屬性--▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/baidu_logo.gif" align=bottom
border=0></A> <INPUT size=15 name=word0> <IFRAME border=0 name=I1
marginWidth=0 marginHeight=0
src="◤CSS教程_濾鏡_alpha屬性--▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/help1.htm" frameBorder=no
width=0 scrolling=no height=0></IFRAME><INPUT type=submit value=百度搜索>
</DIV></FORM> </TD></TR></TBODY></TABLE>
<TABLE id=table3 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD style="BORDER-BOTTOM: 1px solid" borderColor=#00ccff height=21> </TD></TR>
<TR>
<TD background="◤CSS教程_濾鏡_alpha屬性--▃▄ 龍 人 網(wǎng) 絡(luò) ▄▃.files/tdbg.gif"
bgColor=#e5ecf9>
<P align=center><B><A
href="http://www.rr365.net/summary/aboutus.htm">關(guān)于我們</A>-<A
href="http://www.rr365.net/summary/paymethod.htm">付款方式</A>-<A
href="http://www.rr365.net/helpcenter/helpcenter.htm">幫助中心</A>-<A
href="http://www.rr365.net/agent/agent.htm">輕松代理</A>-<A
href="http://www.rr365.net/sitemap.htm">網(wǎng)站地圖</A>-<A
href="mailto:support@rr365.net">聯(lián)系我們</A></B></P></TD></TR></TBODY></TABLE></BODY></HTML>
?? 快捷鍵說明
復(fù)制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -