本实例演示如何在网页上输出各种透明效果的图像，如整体透明、渐变透明等。
向网页上添加两个DIV层，其中左侧图层用于显示图像和文字“Delicious Produce!”，右侧图层作为下拉列表框的容器，设计完成的网页界面如图4-1所示。
图4-1 设计完成的网页
设置左侧DIV图层的id为filterDIV，将图层的style属性中的filter设置为DXImageTransform.Microsoft.Alpha：
<DIV id="filterDIV"
style="position:absolute; top:40; left:10;
width:240; height: 180; background: green;
font-size:15pt;
filter:progid:DXImageTransform.Microsoft.Alpha(
Opacity=100, FinishOpacity=0, Style=1,
StartX=0, FinishX=100, StartY=0, FinishY=100), ;
color:white; z-index:1">
<IMG src="images/fruit.jpg"
style="position:absolute; top:45; left:40">
Delicious Produce!
</DIV>
图层中的透明效果是由各个下拉列表框的onchange事件控制，下面以Opacity对应的下拉列表框为例来说明：
<B> Opacity: </B>
<SELECT onchange="filterDIV.filters.item
('DXImageTransform.Microsoft.Alpha').opacity=
this.options[this.selectedIndex].value">
<OPTION value="0">0</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="20">20</OPTION>
<OPTION value="30">30</OPTION>
<OPTION value="40">40</OPTION>
<OPTION value="50">50</OPTION>
<OPTION value="60">60</OPTION>
<OPTION value="70">70</OPTION>
<OPTION value="80">80</OPTION>
<OPTION value="90">90</OPTION>
<OPTION value="100" SELECTED>100</OPTION>
</SELECT>
在Opacity下拉列表框中包含有“0”、“10”、“20”、“30”、“40”、“50”、“60”、“70”、“80”、“90”和“100”等11个列表项，其中最后一项“100”是默认的选中项，当用户在网页上改变Opacity下拉列表框的选项时，就会激活onchange事件，通过filterDIV.filters. item('DXImageTransform.Microsoft.Alpha').opacity=this.options[this.selectedIndex].value语句设置filterDIV图层的透明度为在列表框中选中的数值。
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT>
function fnEnable(iIndex)
{
if (iIndex!=0)
{
oSelFinOpa.disabled=false;
}
else
{
oSelFinOpa.disabled=true;
}
if (iIndex==1)
{
oSelSX.disabled=false;
oSelSY.disabled=false;
oSelFX.disabled=false;
oSelFY.disabled=false;
}
else
{
oSelSX.disabled=true;
oSelSY.disabled=true;
oSelFX.disabled=true;
oSelFY.disabled=true;
}
}
</SCRIPT>
</HEAD>
<BODY>
<DIV style="LEFT: 270px; width: 400px; position: absolute; TOP: 45px">
<B> Style: </B>
<SELECT onchange="fnEnable(this.options[this.selectedIndex].value);
filterDIV.filters.item('DXImageTransform.Microsoft.Alpha').Style=
this.options[this.selectedIndex].value">
<OPTION value="0">0 - Uniform</OPTION>
<OPTION value="1" SELECTED>1 - Linear</OPTION>
<OPTION value="2">2 - Radial</OPTION>
<OPTION value="3">3 - Rectangular</OPTION>
</SELECT>
<BR><BR>
<B> Opacity: </B>
<SELECT onchange="filterDIV.filters.item
('DXImageTransform.Microsoft.Alpha').opacity=
this.options[this.selectedIndex].value">
<OPTION value="0">0</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="20">20</OPTION>
<OPTION value="30">30</OPTION>
<OPTION value="40">40</OPTION>
<OPTION value="50">50</OPTION>
<OPTION value="60">60</OPTION>
<OPTION value="70">70</OPTION>
<OPTION value="80">80</OPTION>
<OPTION value="90">90</OPTION>
<OPTION value="100" SELECTED>100</OPTION>
</SELECT>
<B> FinishOpacity: </B>
<SELECT id="oSelFinOpa"
onchange="filterDIV.filters.item
('DXImageTransform.Microsoft.Alpha').finishopacity=
this.options[this.selectedIndex].value">
<OPTION value="0" SELECTED>0</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="20">20</OPTION>
<OPTION value="30">30</OPTION>
<OPTION value="40">40</OPTION>
<OPTION value="50">50</OPTION>
<OPTION value="60">60</OPTION>
<OPTION value="70">70</OPTION>
<OPTION value="80">80</OPTION>
<OPTION value="90">90</OPTION>
<OPTION value="100">100</OPTION>
</SELECT>
<BR><BR>
<B> StartX: </B>
<SELECT id="oSelSX"
onchange="filterDIV.filters.item
('DXImageTransform.Microsoft.Alpha').startx=
this.options[this.selectedIndex].value" >
<OPTION value="0" SELECTED>0</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="20">20</OPTION>
<OPTION value="30">30</OPTION>
<OPTION value="40">40</OPTION>
<OPTION value="50">50</OPTION>
<OPTION value="60">60</OPTION>
<OPTION value="70">70</OPTION>
<OPTION value="80">80</OPTION>
<OPTION value="90">90</OPTION>
<OPTION value="100">100</OPTION>
</SELECT>
<B> FinishX: </B>
<SELECT id="oSelFX"
onchange="filterDIV.filters.item
('DXImageTransform.Microsoft.Alpha').finishx=
this.options[this.selectedIndex].value" >
<OPTION value="0">0</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="20">20</OPTION>
<OPTION value="30">30</OPTION>
<OPTION value="40">40</OPTION>
<OPTION value="50">50</OPTION>
<OPTION value="60">60</OPTION>
<OPTION value="70">70</OPTION>
<OPTION value="80">80</OPTION>
<OPTION value="90">90</OPTION>
<OPTION value="100" SELECTED>100</OPTION>
</SELECT>
<BR><BR>
<B> StartY: </B>
<SELECT id="oSelSY"
onchange="filterDIV.filters.item
('DXImageTransform.Microsoft.Alpha').starty=
this.options[this.selectedIndex].value" >
<OPTION value="0" SELECTED>0</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="20">20</OPTION>
<OPTION value="30">30</OPTION>
<OPTION value="40">40</OPTION>
<OPTION value="50">50</OPTION>
<OPTION value="60">60</OPTION>
<OPTION value="70">70</OPTION>
<OPTION value="80">80</OPTION>
<OPTION value="90">90</OPTION>
<OPTION value="100">100</OPTION>
</SELECT>
<B> FinishY: </B>
<SELECT id="oSelFY"
onchange="filterDIV.filters.item
('DXImageTransform.Microsoft.Alpha').finishY=
this.options[this.selectedIndex].value" >
<OPTION value="0" >0</OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="20">20</OPTION>
<OPTION value="30">30</OPTION>
<OPTION value="40">40</OPTION>
<OPTION value="50">50</OPTION>
<OPTION value="60">60</OPTION>
<OPTION value="70">70</OPTION>
<OPTION value="80">80</OPTION>
<OPTION value="90">90</OPTION>
<OPTION value="100" SELECTED>100</OPTION>
</SELECT>
<BR><BR>
</DIV>
<DIV id="filterDIV" style="position:absolute; top:40; left:10;
width:240; height: 180; background: green;
font-size:15pt;
filter:progid:DXImageTransform.Microsoft.Alpha(
Opacity=100, FinishOpacity=0, Style=1, StartX=0,
FinishX=100, StartY=0, FinishY=100), ;
color:white; z-index:1">
<IMG src="images/fruit.jpg"
style="position:absolute; top:45; left:40">
Delicious Produce!
</DIV>
</BODY>
</HTML>
保存文件，在浏览器中浏览网页文件，初始画面如图4-2所示。
图4-2 初始画面
选择Style为0-Uniform，Opacity为20，结果如图4-3所示。
图4-3 透明效果的图像之一
选择Style为1-Linear，Opacity为0，FinishOpacity为100，StartX为30，StartY为30，FinishX为60，FinishY为100，结果如图4-4所示。
图4-4 透明效果的图像之二
选择Style为2-Radial，Opacity为100，FinishOpacity为0，结果如图4-5所示。
选择Style为3-Rectangular，Opacity为0，FinishOpacity为70，结果如图4-6所示。
图4-5 透明效果的图像之三
图4-6 透明效果的图像之四
E- mail:
本站ICP备案号：
