用css滤镜实现的图片透明度及渐变效果
<HTML>
<HEAD>
<TITLE>三种用css滤镜实现的图片透明度及渐变效果</TITLE>
<STYLE>
<!--样式单 -->
.15pt{font-size:15pt;color:#de3076}
.30pt{font-size:30pt;color:#33cc99;font-family:创艺繁琥珀}
</STYLE>
<SCRIPT>
var explain=new Array(
"原图<br>正常图片",
"效果一<br>style='FILTER: alpha(opacity=50)'",
"效果二<br>style='FILTER: alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=5,finishx=250,finishy=85)'",
"效果三<br>style='FILTER: alpha(opacity=0,finishopacity=80,style=1,startx=0,starty=5,finishx=250,finishy=85)'"
)
var images=new Array(
"<IMG height=128 alt=正常图片 src=http://www.baidu.com/img/baidu_sylogo1.gif width=128>",
"<IMG style='FILTER: alpha(opacity=50)' height=128 alt=filter:alpha(opacity=50) src=http://www.baidu.com/img/baidu_sylogo1.gif width=128>",
"<IMG style='FILTER: alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=5,finishx=250,finishy=85)' height=128 alt=filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=5,finishx=250,finishy=285) src=http://www.baidu.com/img/baidu_sylogo1.gif width=128>",
"<IMG style='FILTER: alpha(opacity=0,finishopacity=80,style=1,startx=0,starty=5,finishx=250,finishy=85)' height=128 alt=filter:alpha(opacity=0,finishopacity=80,style=1,startx=0,starty=5,finishx=250,finishy=285) src=http://www.baidu.com/img/baidu_sylogo1.gif width=128>"
)
var clicknumber=1
function ClickToEvent()
{
exp_text.innerHTML=explain[clicknumber]
dialyzer.innerHTML=images[clicknumber]
clicknumber=(clicknumber+=1)%4
}
document.onclick=ClickToEvent
</SCRIPT>
</HEAD>
<BODY>
<center>
<font class=14pt><br>单击鼠标左键,观察ALPHA滤镜效果。<br><br></font>
</center>
<TABLE border=0 width=100% height=300 class=15pt >
<TR>
<TD align=center><SPAN ID=exp_text >正常图片</SPAN>
</TR>
<TR>
<TD align=center><span id=dialyzer><IMG height=128 alt=正常图片 src=http://www.baidu.com/img/baidu_sylogo1.gif width=128></span>
</TR>
</TABLE>
</BODY>
</HTML>
