css div によって実装されたマスク レイヤーは、IE6 ～ IE9 および FireFox ブラウザーと互換性があります。

css p マスク レイヤーは、Web ページに詳しい友人にはよく知られているはずです。インターネット上にも関連する実装記事がありますが、そのほとんどはブラウザーに対応していません。この記事では、IE6 に対応しているものを紹介します。 -IE9 FireFox マスクレイヤー、興味のある方はお見逃しなく

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="css div によって実装されたマスク レイヤーは、IE6 ～ IE9 および FireFox ブラウザーと互換性があります。" > 
</p> 
<p style="float: left; padding-top: 15px;">数据加载中，请稍后...</p> 
</p>

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; 
}

レンダリング:
IE6:

その他のバージョンの効果: 画像は貼り付けません一つ。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS を使用して DIV レイヤーの表示と非表示を制御する方法

以上がcss div によって実装されたマスク レイヤーは、IE6 ～ IE9 および FireFox ブラウザーと互換性があります。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。