CSS Div Mask layer must be familiar with the Web page friends are not unfamiliar with it, the Internet has related to the implementation of the article, but most of the compatibility of the browser is not good, in this article will introduce you to a compatible IE6-IE9 FireFox mask layer, interested friends do not miss
HTML code:
Copy Code code as follows:
<div id= "Black_overlay" style= "Display:none"; ></div>
<div style= "display:none;" id= "load_content" >
<div style= "float:left; padding-top:12px; padding-left:5px; " >
<img src= "Images/progressbar.gif"/>
</div>
<div style= "float:left; padding-top:15px; " > Data loading, please ...</div>
later
</div>
CSS style:
Copy Code code as follows:
/*loading Load Mask layer css*/
#black_overlay
{
position:fixed;
z-index:1000;
width:100%;
height:100%;
top:0;
left:0;
Filter:alpha (opacity=80);
opacity:0.8;
Overflow:hidden;
Background-color: #000;
}
*html
{
Background:url (*) fixed;
}
*html Body
{
margin:0;
height:100%;
}
/*ie6*/
*html #black_overlay
{
Position:absolute;
left:expression (documentelement.scrollleft + documentelement.clientwidth-this.offsetwidth);
top:expression (documentelement.scrolltop + documentelement.clientheight-this.offsetheight);
}
#load_content
{
Display:none;
Position:absolute;
top:40%;
left:40%;
width:200px;
height:50px;
BORDER:16PX solid #FFF;
Border-bottom:none;
Background-color:white;
z-index:1002;
Overflow:auto;
font-size:14px;
Font-weight:bold;
}
Effect Chart:
IE6:
Other version effects: It's not a map.
