2011-03-20 6 views
0

나는 많은 콘텐츠를 표시하는 웹 응용 프로그램을 가지고 있으며 사용자가 거기에서 무엇을 볼 수는 있지만 액세스 할 수 없도록 일부 요소에 50 % 이상의 투명 이미지가 있어야합니다.요소를 차단하는 방법

CSS로이 작업을 수행 할 수 있습니까?

jQuery BlockUI를 살펴 봤지만 적합하지 않습니다.

+0

이것은 HTML 및 인터페이스 관점 (비 IE 브라우저 및 잠재적 인 접근 가능성 문제에 대한 불필요한 이미지)에서이를 달성하는 끔찍한 방법입니다. 입력 비활성화 = "사용 안 함"방법을 권장하고 CSS를 통해 스타일을 사용자 정의합니다. http://jsfiddle.net/kqPjt/1/ – Alex

답변

0

는이 같은 CSS로 요소를 확인해야합니다 :

position: fixed; 
top: 0; 
left: 0; 

height: 100%; 
width: 100%; 

background: black; 
opacity: .5; 
filter: alpha(opacity=50) 
+0

유감스럽게도 그 트릭을 수행하지 않습니다. 사용자가 폼 요소 (체크 박스/드롭 다운)를 클릭하지 못하도록 검은 불투명도가 필요합니다. – Michael

+0

@ 마이클 :'z-index : 1234567'을 잊었습니다. 또한 요소에 배치 된 부모가 없는지 확인하십시오. – SLaks

0

예는 수 있습니다. 정면에 있어야하는 요소가 그 뒤에 있어야하는 요소보다 z- 색인이 더 높은지 확인하십시오.

+0

감사합니다. 점점 더 가까워지고 있지만 배경은 여전히 ​​요소 뒤에 있습니다. 불투명도가 정상적으로 작동합니다. 또한 차단해야하는 요소의 확인란을 계속 클릭 할 수 있습니다. – Michael

1

누군가가 확인란이나 선택 상자를 클릭하지 못하게하려면 disabled="disabled" 속성을 설정하는 것이 좋습니다.

<div class="wrap"> 
    <select><option>Disabled</option></select> 
    <div class="blocker"></div> 
</div> 

및 CSS :

See example →


그러나 다른 요소를 차단 주장하는 경우, 다음과 같은 HTML과 래퍼 사업부와 relativeabsolute 위치를 사용할 수

.wrap { position:relative; } 
.blocker { 
    background:rgba(0,0,0,0.3); 
    position:absolute; top:0; left:0; 
    width:100%; height:100%; 
} 

See example →

관련 문제