📄 ◤css教程_滤镜_alpha属性--▃▄ 龙 人 网 络 ▄▃.htm
字号:
style="FONT-SIZE: 11pt"> 实现上面这种效果的代码如下：</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区域内的样式（位置为绝对定位，left、top、width的坐标）*//</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>//*导入一张图片*//</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"> 如果在上面的代码中稍做改动，则将产生另外多种效果。我们只修改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">//*设置透明渐变效果，起始坐标，终止渐变坐标，并设置透明样式值（style=1）为 线形*//
</SPAN></FONT></P>
<P class=p2 style="LINE-HEIGHT: 17pt"><SPAN
style="FONT-SIZE: 11pt"> 这段代码产生的效果如左下图所示，右面的两幅图分别是把Alpha中的Style参数值为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属性--▃▄ 龙 人 网 络 ▄▃.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属性--▃▄ 龙 人 网 络 ▄▃.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属性--▃▄ 龙 人 网 络 ▄▃.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滤镜属性的应用，具体应用还需要您自己找个例子练一练。<BR> 下一节我们将介绍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">上一节</A>|<A
href="http://www.rr365.net/edu-css/css106c.htm">下一节</A></P></TD></TR>
<TR>
<TD>
<HR width="75%" color=#e5ecf9>
<P align=center>网页教程: <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属性--▃▄ 龙 人 网 络 ▄▃.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属性--▃▄ 龙 人 网 络 ▄▃.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属性--▃▄ 龙 人 网 络 ▄▃.files/tdbg.gif"
bgColor=#e5ecf9>
<P align=center><B><A
href="http://www.rr365.net/summary/aboutus.htm">关于我们</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">网站地图</A>-<A
href="mailto:support@rr365.net">联系我们</A></B></P></TD></TR></TBODY></TABLE></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -