ホームページ >ウェブフロントエンド >CSSチュートリアル >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="images/progressBar.gif" /> </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 サイトの他の関連記事を参照してください。