css p 遮罩层想必熟悉网页的朋友都不陌生吧,网上也有相关的实现文章,不过大都对浏览器的兼容性不好,在本文将为大家介绍的是一个可以兼容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中文网!
相关推荐:
以上是css div实现的遮罩层兼容IE6-IE9和FireFox浏览器的详细内容。更多信息请关注PHP中文网其他相关文章!