이 효과는 매우 자주 사용되며 사람들은 종종이 질문을하기 때문에 기사에 써야합니다. 다음에 누군가가 물을 때,이 기사의 URL을 버리십시오. 이 효과는 매우 간단하기 때문에 너무 많이 설명하지 않습니다. 코드 주석을 자세히 보면 이해할 수 있습니다. 다음은 모든 코드이며 HTML에 복사하여 실행할 수 있습니다.
<! doctype html> <style> #mask {위치 : 고정; 너비 : 100%; 상단 : 0px; 왼쪽 : 0px; _position : 절대; _top : expression (documentElement.scrolltop); 배경 : RGBA (0,0,0,0.5); 배경 : 투명한/9; 필터 : progid : dximagetransform.microsoft.gradient (startColorstr =#80000000, endColorStr =#80000000); 디스플레이 : none;}#mask_td {text-align : center;} </style> <img src = "http://web-tinker.com/images/themagicconch.jpg"id = "img"/> <table id = "mask"> <t> <td id = "mask_td"> </td> isie = navigator.useragent.match (/msie (/d)/i); isie = isie? isie [1] : isie; // 변수 var img, mask; // 요소 img = document.getElementById ( "img"); mask = document.getElementById ( "mask"); mask _ // // OF MASK MASK.SETSIZE = function () {// 문서의 가시 영역 너비를 가져 와서 마스크 var de = document.documentElement; mask.style.width = de.clientWidth+"px"mask.style.seight.height = de.clientHeight+"px"mask.style.height = de.clientHeight+"px";}; // 쇼 메소드 MAST.SHOW = function () {// scrollbar 문서 숨기기 [isie <9? " ] .style.overflow = "숨겨진"; // 마스크 마스크의 크기를 계산합니다 .SetSize (); // show mask.style.display = isie == 6? "block": "table";}; // 메소드 마스크 추가 마스크를 추가합니다. hide = function () {// 페이지 표시 스크롤 바 문서 표시 // mask.td.innerhtml = ""내에서 내용을 지우십시오. // mask.style.display = "none";}; // 부록 메소드 추가 메소드 마스크 추가 마스크를 추가합니다. (e.target || e.srcelement) == mask.td && mask.hide ();}; // 양식 크기가 Window.onResize = function () {mask.setsize ();}를 변경할 때 마스크 크기를 추가합니다. // 이미지 img.onclick = function () {) {// 이미지 대상을 클릭하십시오. // 이미지 주소 설정 O.SRC = IMG.SRC; // 컨텐츠 마스크 추가. // 마스크 마스크 표시 .Show ();}; </script>이 효과에는 어려움이 없으며 가장 어려운 것은 아마도 반투명 구현 일 것입니다. CSS3의 불투명도와 IE의 알파는 모두 반투명을 달성 할 수 있지만 이는 전체 요소의 반투명입니다. 이 방법을 사용한다는 것은 어린이 요소도 반투명하다는 것을 의미하므로 투명성을 전체 요소가 아닌 배경으로 설정해야합니다. CSS3에서는 RGBA를 직접 사용하여 설정할 수 있습니다. IE에는 그러한 방법이 없지만 그라디언트 필터도 투명성을 지원하기 때문에 그라디언트 필터를 대신 사용할 수 있습니다. 또한 IE9에서는 CSS3의 투명성 및 필터의 투명성과 호환됩니다. 둘 다 사용되면 페이지의 투명성이 올바르지 않습니다. 그래서 우리는 IE9의 투명한 효과 중 하나를 차단했습니다.
또 다른 문제는 IE6과 호환된다는 것입니다. IE6은 고정 된 지원을 지원하지 않으므로 절대 및 동적으로 설정된 상단을 사용해야합니다. 그런 다음 마스크 크기 계산 문제가 있습니다. 브라우저 차이도 있습니다. 실제로이 효과의 브라우저 차이는 상당히 크지 만 약간의 작은 문제가 보이면 먼 길로 이야기 할 필요가 없다는 것을 이해할 것입니다.