>  기사  >  웹 프론트엔드  >  CSS div로 구현된 마스크 레이어는 IE6-IE9 및 FireFox 브라우저와 호환됩니다.

CSS div로 구현된 마스크 레이어는 IE6-IE9 및 FireFox 브라우저와 호환됩니다.

不言
不言원래의
2018-06-15 09:42:152839검색

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 레이어 표시 및 숨기기를 제어하는 ​​방법

위 내용은 CSS div로 구현된 마스크 레이어는 IE6-IE9 및 FireFox 브라우저와 호환됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.