css div实现的遮罩层兼容IE6-IE9和FireFox浏览器-css教程-PHP中文网

css div实现的遮罩层兼容IE6-IE9和FireFox浏览器

不言

发布： 2018-06-15 09:42:15

原创

3068人浏览过

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;"> 
@@##@@ 
</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：

css div实现的遮罩层兼容IE6-IE9和FireFox浏览器
其他版本效果：就不一一贴图了。

立即学习“前端免费学习笔记（深入）”；

易企CMS1.8

易企CMS：国内首款完全基于SEO友好性开发的营销型企业网站系统，让企业网络营销从此易如反掌。本程序特征：100%开发源代码，免费开源;后台管理操作简单易行;模板div+css标准设计,符合w3c标准，兼容主流浏览器;开发语言和数据库：PHP+Mysql。本程序亮点：从基础代码开发起完全符合SEOWHY理论的SEO规范，力图实现国内首款对SEO最友好的企业网站开源程序，为企业网络营销的巨大成功