투명 배경 요소 아래 요소가 IE에서 액세스 가능

coverUp div 아래에 다른 div를 추가로 표시하려고합니다. 그런 다음 coverUp의 배경을 투명하게 설정합니다. 이렇게하면 아래 div가 표시되지만 사용자는 해당 항목과 상호 작용할 수 없습니다. 슬프게도 이것은 IE에서 일어나는 것이 아닙니다.투명 배경 요소 아래 요소가 IE에서 액세스 가능

coverUp div를 투명하게 설정하면 eclipsed div는 IE에서 사용자 (10 포함)에 액세스 할 수 있습니다. 이것에 대한 해결책이 있습니까?

여기에 example입니다.

<div class="coverUp"></div> 
<div id="mapDiv"></div> 

.coverUp { 
    background-color: transparent; 
    position: absolute; 
    top: 0; 
    height: 100%; 
    width: 100%; 
    left: 0; 
    cursor: pointer; 
    z-index: 50; 
}

편집 : 나는 내가 불투명도를 적용 할 때 페이드 아웃 덮어 두자 사업부에서 자식 요소를 가지고 불투명도를 사용할 수 없습니다 : 0.

출처

2013-06-28 Sam007

안녕하세요, 어떻게하면 div로 덮어 버릴 수 있겠습니까? 그 아래에 div's를 처리 할 수 없습니다. 그것을 지키기 위해'mapdiv '에'div'를 가져가는 목적이 무엇인지 알려주세요. –

내 앱의 coverUp div는 mapDiv를 다루기위한 것이지만 약 20px의 끝 부분에 약간의 은색을 남깁니다. 사용자가이 슬리버를 통해 mapDiv에 액세스하지 못하도록하고 싶습니다. 사용자가 아래의 mapDiv를 보길 원합니다. – Sam007

css tricks 덕분에 문제를 해결할 수있었습니다.

I이 추가

여기서

background:url("datdata:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");

는 example이다.

참고 : jsfiddle이 IE8에서 열리지 않습니다 (IE10 브라우저에서 IE8 모드에서 적어도 열리지 않았습니다). 그래서이 ur 코드를 변경하고 확인하십시오.

출처

2013-06-28 16:31:21 Sam007

투명 대신에 불투명도를 사용할 수 있습니다 : 0; div 요소는 여전히 블록 요소입니다.

Z- 색인을 99999로 설정하면 페이지의 다른 모든 요소 위에 강제로 표시 할 수 있습니다.

출처

2013-06-28 04:00:51 MadScientist

IE 용 99999 Z- 인덱스 설정이 작동하지 않습니다. U는 질문의 예에서이를 확인할 수 있습니다. 또한 커버 업 디비전에 어린이가있어서 불투명도를 설정하면 아이들이 희미 해집니다. – Sam007

다음과 같은 CSS 태그를 사용하여 배경색이 투명하지만 무언가를 만들 수 있습니다.

background-color: rgba(255,255,255,0);

첫 번째 3 개의 인수는 십진수로 변환 된 16 진수이며, 4 번째 인수는 투명도입니다. opacity: 0을 설정하는 것과 같은 방식으로 불투명도가 변경되는지 여부는 알 수 없습니다. 페이지에 있어야하는 것이 무엇인지 알 수 없으므로 알아 두어야 할 수도 있습니다.

IE9에서 fiddler (link)을 테스트했지만 피들러가 IE7 & 8에서 페이지를로드하는 데 문제가있어서 불행히도 테스트하지 않았습니다.

출처

2013-06-28 08:34:56 Andrew

불행히도 IE8에서는 작동하지 않습니다. 배경색은 흰색입니다. IE9와 IE10에서 잘 작동합니다. – Sam007

투명 배경 요소 아래 요소가 IE에서 액세스 가능

답변

관련 문제