La couche de masque implémentée par CSS Div est compatible avec les navigateurs IE6-IE9 et FireFox

La couche de masque CSS p doit être familière aux amis qui connaissent les pages Web. Il existe également des articles de mise en œuvre connexes sur Internet, mais la plupart d'entre eux ne sont pas compatibles avec les navigateurs. Dans cet article, nous en présenterons un qui est compatible. avec la couche de masque de FireFox IE6-IE9, les amis intéressés ne devraient pas manquer

Code HTML :

<p id="black_overlay" style="display: none;"></p> 
<p style="display: none;" id="load_content" > 
<p style="float: left; padding-top: 12px; padding-left: 5px;"> 
<img  src="/static/imghwm/default1.png"  data-src="images/progressBar.gif"  class="lazy"   / alt="La couche de masque implémentée par CSS Div est compatible avec les navigateurs IE6-IE9 et FireFox" > 
</p> 
<p style="float: left; padding-top: 15px;">数据加载中，请稍后...</p> 
</p>

Style CSS :

/*loading加载遮罩层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; 
}

. Rendu :
IE6 :

Autres effets de version : Les images ne seront pas collées une par une.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment contrôler l'affichage et le masquage des calques DIV avec CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!