<div id="bbp_toolbar" style="display: block; filter: alpha(opacity=75);">
<div id="Layer1" style="position: absolute; width: 200px; height: 115px; left: 50px;
top: 50px; filter: alpha(opacity=20); background-color: blue">
</div>
filter:alpha(opacity=30);-moz-opacity: 0.6;opacity: 0.6; ---------------- 设置属性：FILTER:alpha(opacity=20);
-------------------- 仅支持 FF
<script>document.getElementById("Layer1").style.opacity = "0.5";</script>
IE Only
<script>document.getElementById("Layer1").style.filter = "alpha(opacity=50%)";</script>
<div id="Layer1" style="position: absolute; width: 200px; height: 115px; left: 50px;
top: 50px; filter: alpha(opacity=20); background-color: blue">
</div>
filter:alpha(opacity=30);-moz-opacity: 0.6;opacity: 0.6; ---------------- 设置属性：FILTER:alpha(opacity=20);
-------------------- 仅支持 FF
<script>document.getElementById("Layer1").style.opacity = "0.5";</script>
IE Only
<script>document.getElementById("Layer1").style.filter = "alpha(opacity=50%)";</script>
为了达到给层设置半透明的效果时，在IE和firefox下也有所不同，IE下，style的filter属性有Alpha值可供使用，而firefox下没有Alpha值，所以得指定style的MozOpacity，代码见下：
<script language="javascript">
//设置一个id为screen的div的透明度为45%，在IE下：
document.getElementById("screen").style.filter="Alpha(Opacity=45)";
//而在firefox下：
document.getElementById("screen").style.MozOpacity="0.45";
我们可以用CSS样式的filter（滤镜效果）对HTML的一些标记设置滤镜效果。
例：
黑白照片 filter: gray;
X光照片 filter: Xray;
风动模糊 filter: blur(add=true,direction=45,strength=30);
正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻转 filter: fliph;
垂直翻转 filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
马赛克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
发光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2
兼容ff和IE的div透明度设置，css代码和js代码
#AdLayer{
filter:alpha(opacity=30);
-moz-opacity: 0.6;
opacity: 0.6;
position:absolute;
width:61px;
height:59px;
z-index:20;
visibility:hidden;
left: 600px;
top:300px;
}
function run(){
if (navigator.appName.indexOf("Internet Explorer") == 10){
alert("IE浏览器："+document.getElementById('div1').filters.alpha.Opacity);
}else{
alert("FF浏览器："+document.getElementById('div1').style.opacity);
}
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>DIV蒙板效果</title>
<style type=text/css>
body{
margin:0px;
padding:0px;
font-size:12px;
}
#ifr_Mask{
opacity: 0;
filter: alpha(opacity=0);
border: none;
}
/*蒙板颜色及透明度*/
#div_Mask{
background-color:#EDEDED;
opacity:0.7;
filter:alpha(opacity=80);
}
/*蒙板显示内容*/
#msg{
background-color: #FFFFFF;
display: none;
width: 400px;
height: 300px;
border-right: #FF0000 1px solid;
border-top: #FF0000 1px solid;
border-left: #FF0000 1px solid;
border-bottom: #FF0000 1px solid;
color: #000000;
font-family:Tahoma;
}
</style>
</head>
<body>
<input type="button" onClick="MaskDialog.show();" value="show mask layer" />
9486794576
<div id="msg">
you can see never!
<p><a href="javascript:MaskDialog.hide();">关闭</a></p>
</div>
<script language="javascript">
function maskDialog()
{
// public properties start
this.mainForm;
this.top="100";
// public properties end
this.showStatus=false;
if(typeof this.mainForm != "#ff0000" && this.mainForm != null)
{
this.mainForm.style.display="none";
}
if(window.onresize)
{
var evt=window.onresize;
window.onresize=function(){evt(); MaskDialog.resize();};
}
else
{
window.onresize=function(){MaskDialog.resize();};
}
if(window.onscroll)
{
var evt=window.onscroll;
window.onscroll=function(){evt(); MaskDialog.scroll();};
}
else
{
window.onscroll=function(){MaskDialog.scroll();};
}
//隐藏蒙板效果
this.hide=function()
{
var mask=document.getElementById("div_Mask");
if(typeof mask != "undefined" && mask!=null)
{
var body = document.getElementsByTagName("body")[0];
body.removeChild(mask);
}
var ifr=document.getElementById("ifr_Mask");
if(typeof ifr != "undefined" && ifr!=null)
{
var body = document.getElementsByTagName("body")[0];
body.removeChild(ifr);
}
if(typeof this.mainForm != "undefined" && this.mainForm != null)
{
this.mainForm.style.display="none";
}
this.showStatus=false;
};
//显示蒙板效果
this.show=function()
{
var body = document.getElementsByTagName("body")[0];
var pageDimensions=this.getPageDimensions();
var sheet = document.createElement("div");
sheet.setAttribute("id","div_Mask");
sheet.style.position="absolute";
sheet.style.left="0px";
sheet.style.top="0px";
sheet.style.zIndex="999";
sheet.style.width=pageDimensions[0] + "px";
sheet.style.height=pageDimensions[1] + "px";
var ifr = document.createElement("iframe");
ifr.setAttribute("id","ifr_Mask");
ifr.style.position="absolute";
ifr.style.display="block";
ifr.style.zIndex="998";
ifr.width=pageDimensions[0];
ifr.height=pageDimensions[1];
ifr.scrolling="no";
ifr.frameborder="0";
ifr.style.left="0px";
ifr.style.top="0px";
body.appendChild(ifr);
body.appendChild(sheet);
if(typeof this.mainForm != "undefined" && this.mainForm != null)
{
this.mainForm.style.display="block";
this.mainForm.style.zIndex="1000";
}
this.showStatus=true;
this.scroll();
};
this.resize=function()
{
if(this.showStatus==false)
{
return;
}
var mask=document.getElementById("div_Mask");
var ifr=document.getElementById("ifr_Mask");
if(typeof mask != "undefined" && mask != null && typeof ifr != "undefined" && ifr != null )
{
var body = document.getElementsByTagName("body")[0];
var pageDimensions=this.getPageDimensions();
mask.style.width=pageDimensions[0] + "px";
mask.style.height=pageDimensions[1] + "px";
ifr.width=pageDimensions[0];
ifr.height=pageDimensions[1];
this.scroll();
}
};
this.scroll=function()
{
if(this.showStatus==false)
{
return;
}
if(typeof this.mainForm != "undefined" && this.mainForm != null)
{
var pageDimensions=this.getPageDimensions();
this.mainForm.style.position="absolute";
this.mainForm.style.top=document.documentElement.scrollTop + "px";
if(typeof this.mainForm.style.width == "undefined" || this.mainForm.style.width=="")
{
this.mainForm.style.width=pageDimensions[0] /2 + "px";
}
var newLeft= pageDimensions[0] / 2 - parseInt(this.mainForm.style.width,10) /2
var newTop= document.documentElement.scrollTop + parseInt(this.top);
this.mainForm.style.left= newLeft + "px";
this.mainForm.style.top= newTop + "px";
}
};
this.getPageDimensions=function()
{
var body = document.getElementsByTagName("body")[0];
var bodyOffsetWidth = 0;
var bodyOffsetHeight = 0;
var bodyScrollWidth = 0;
var bodyScrollHeight = 0;
var pageDimensions = [0,0];
pageDimensions[0]=document.documentElement.clientWidth;
pageDimensions[1]=document.documentElement.clientHeight;
bodyOffsetWidth=body.offsetWidth;
bodyOffsetHeight=body.offsetHeight;
bodyScrollWidth=body.scrollWidth;
bodyScrollHeight=body.scrollHeight;
if(bodyOffsetWidth > pageDimensions[0])
{
pageDimensions[0]=bodyOffsetWidth;
}
if(bodyOffsetHeight > pageDimensions[1])
{
pageDimensions[1]=bodyOffsetHeight;
}
if(bodyScrollWidth > pageDimensions[0])
{
pageDimensions[0]=bodyScrollWidth;
}
if(bodyScrollHeight > pageDimensions[1])
{
pageDimensions[1]=bodyScrollHeight;
}
return pageDimensions;
};
return true;
}
var MaskDialog=new maskDialog();
window.onload=function(){MaskDialog.mainForm=document.getElementById("msg");}
</script>
</body> </html>
<div id="Layer1" style="position: absolute; width: 200px; height: 115px; left: 50px;
top: 50px; filter: alpha(opacity=20); background-color: blue">
</div>
filter:alpha(opacity=30);-moz-opacity: 0.6;opacity: 0.6; ---------------- 设置属性：FILTER:alpha(opacity=20);
-------------------- 仅支持 FF
<script>document.getElementById("Layer1").style.opacity = "0.5";</script>
IE Only
<script>document.getElementById("Layer1").style.filter = "alpha(opacity=50%)";</script>
<div id="Layer1" style="position: absolute; width: 200px; height: 115px; left: 50px;
top: 50px; filter: alpha(opacity=20); background-color: blue">
</div>
filter:alpha(opacity=30);-moz-opacity: 0.6;opacity: 0.6; ---------------- 设置属性：FILTER:alpha(opacity=20);
-------------------- 仅支持 FF
<script>document.getElementById("Layer1").style.opacity = "0.5";</script>
IE Only
<script>document.getElementById("Layer1").style.filter = "alpha(opacity=50%)";</script>
为了达到给层设置半透明的效果时，在IE和firefox下也有所不同，IE下，style的filter属性有Alpha值可供使用，而firefox下没有Alpha值，所以得指定style的MozOpacity，代码见下：
<script language="javascript">
//设置一个id为screen的div的透明度为45%，在IE下：
document.getElementById("screen").style.filter="Alpha(Opacity=45)";
//而在firefox下：
document.getElementById("screen").style.MozOpacity="0.45";
我们可以用CSS样式的filter（滤镜效果）对HTML的一些标记设置滤镜效果。
例：
黑白照片 filter: gray;
X光照片 filter: Xray;
风动模糊 filter: blur(add=true,direction=45,strength=30);
正弦波纹 filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);
半透明效果 filter: Alpha(Opacity=50);
线型透明 filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140);
放射透明 filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200);
白色透明 filter: Chroma(Color=#FFFFFF);
降低色彩 filter: grays;
底片效果 filter: invert;
左右翻转 filter: fliph;
垂直翻转 filter: flipv;
投影效果 filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true);
马赛克 filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);
发光效果 filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5);
柔边效果 filter:alpha(opacity=100, finishOpacity=0,style=2
兼容ff和IE的div透明度设置，css代码和js代码
#AdLayer{
filter:alpha(opacity=30);
-moz-opacity: 0.6;
opacity: 0.6;
position:absolute;
width:61px;
height:59px;
z-index:20;
visibility:hidden;
left: 600px;
top:300px;
}
function run(){
if (navigator.appName.indexOf("Internet Explorer") == 10){
alert("IE浏览器："+document.getElementById('div1').filters.alpha.Opacity);
}else{
alert("FF浏览器："+document.getElementById('div1').style.opacity);
}
}
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>DIV蒙板效果</title>
<style type=text/css>
body{
margin:0px;
padding:0px;
font-size:12px;
}
#ifr_Mask{
opacity: 0;
filter: alpha(opacity=0);
border: none;
}
/*蒙板颜色及透明度*/
#div_Mask{
background-color:#EDEDED;
opacity:0.7;
filter:alpha(opacity=80);
}
/*蒙板显示内容*/
#msg{
background-color: #FFFFFF;
display: none;
width: 400px;
height: 300px;
border-right: #FF0000 1px solid;
border-top: #FF0000 1px solid;
border-left: #FF0000 1px solid;
border-bottom: #FF0000 1px solid;
color: #000000;
font-family:Tahoma;
}
</style>
</head>
<body>
<input type="button" onClick="MaskDialog.show();" value="show mask layer" />
9486794576
<div id="msg">
you can see never!
<p><a href="javascript:MaskDialog.hide();">关闭</a></p>
</div>
<script language="javascript">
function maskDialog()
{
// public properties start
this.mainForm;
this.top="100";
// public properties end
this.showStatus=false;
if(typeof this.mainForm != "#ff0000" && this.mainForm != null)
{
this.mainForm.style.display="none";
}
if(window.onresize)
{
var evt=window.onresize;
window.onresize=function(){evt(); MaskDialog.resize();};
}
else
{
window.onresize=function(){MaskDialog.resize();};
}
if(window.onscroll)
{
var evt=window.onscroll;
window.onscroll=function(){evt(); MaskDialog.scroll();};
}
else
{
window.onscroll=function(){MaskDialog.scroll();};
}
//隐藏蒙板效果
this.hide=function()
{
var mask=document.getElementById("div_Mask");
if(typeof mask != "undefined" && mask!=null)
{
var body = document.getElementsByTagName("body")[0];
body.removeChild(mask);
}
var ifr=document.getElementById("ifr_Mask");
if(typeof ifr != "undefined" && ifr!=null)
{
var body = document.getElementsByTagName("body")[0];
body.removeChild(ifr);
}
if(typeof this.mainForm != "undefined" && this.mainForm != null)
{
this.mainForm.style.display="none";
}
this.showStatus=false;
};
//显示蒙板效果
this.show=function()
{
var body = document.getElementsByTagName("body")[0];
var pageDimensions=this.getPageDimensions();
var sheet = document.createElement("div");
sheet.setAttribute("id","div_Mask");
sheet.style.position="absolute";
sheet.style.left="0px";
sheet.style.top="0px";
sheet.style.zIndex="999";
sheet.style.width=pageDimensions[0] + "px";
sheet.style.height=pageDimensions[1] + "px";
var ifr = document.createElement("iframe");
ifr.setAttribute("id","ifr_Mask");
ifr.style.position="absolute";
ifr.style.display="block";
ifr.style.zIndex="998";
ifr.width=pageDimensions[0];
ifr.height=pageDimensions[1];
ifr.scrolling="no";
ifr.frameborder="0";
ifr.style.left="0px";
ifr.style.top="0px";
body.appendChild(ifr);
body.appendChild(sheet);
if(typeof this.mainForm != "undefined" && this.mainForm != null)
{
this.mainForm.style.display="block";
this.mainForm.style.zIndex="1000";
}
this.showStatus=true;
this.scroll();
};
this.resize=function()
{
if(this.showStatus==false)
{
return;
}
var mask=document.getElementById("div_Mask");
var ifr=document.getElementById("ifr_Mask");
if(typeof mask != "undefined" && mask != null && typeof ifr != "undefined" && ifr != null )
{
var body = document.getElementsByTagName("body")[0];
var pageDimensions=this.getPageDimensions();
mask.style.width=pageDimensions[0] + "px";
mask.style.height=pageDimensions[1] + "px";
ifr.width=pageDimensions[0];
ifr.height=pageDimensions[1];
this.scroll();
}
};
this.scroll=function()
{
if(this.showStatus==false)
{
return;
}
if(typeof this.mainForm != "undefined" && this.mainForm != null)
{
var pageDimensions=this.getPageDimensions();
this.mainForm.style.position="absolute";
this.mainForm.style.top=document.documentElement.scrollTop + "px";
if(typeof this.mainForm.style.width == "undefined" || this.mainForm.style.width=="")
{
this.mainForm.style.width=pageDimensions[0] /2 + "px";
}
var newLeft= pageDimensions[0] / 2 - parseInt(this.mainForm.style.width,10) /2
var newTop= document.documentElement.scrollTop + parseInt(this.top);
this.mainForm.style.left= newLeft + "px";
this.mainForm.style.top= newTop + "px";
}
};
this.getPageDimensions=function()
{
var body = document.getElementsByTagName("body")[0];
var bodyOffsetWidth = 0;
var bodyOffsetHeight = 0;
var bodyScrollWidth = 0;
var bodyScrollHeight = 0;
var pageDimensions = [0,0];
pageDimensions[0]=document.documentElement.clientWidth;
pageDimensions[1]=document.documentElement.clientHeight;
bodyOffsetWidth=body.offsetWidth;
bodyOffsetHeight=body.offsetHeight;
bodyScrollWidth=body.scrollWidth;
bodyScrollHeight=body.scrollHeight;
if(bodyOffsetWidth > pageDimensions[0])
{
pageDimensions[0]=bodyOffsetWidth;
}
if(bodyOffsetHeight > pageDimensions[1])
{
pageDimensions[1]=bodyOffsetHeight;
}
if(bodyScrollWidth > pageDimensions[0])
{
pageDimensions[0]=bodyScrollWidth;
}
if(bodyScrollHeight > pageDimensions[1])
{
pageDimensions[1]=bodyScrollHeight;
}
return pageDimensions;
};
return true;
}
var MaskDialog=new maskDialog();
window.onload=function(){MaskDialog.mainForm=document.getElementById("msg");}
</script>
</body> </html>
