라이트 박스 : 화면의 나머지 부분을 투명하게 만들 때의 문제

배경이 많이 사용 된 웹 사이트 디자인 : 여러 장소에서 rgba 사용. 내가 사용중인 라이트 박스를 만들려고했을 때 background: rgba(0, 0, 0, 0.6) !important; 화면의 나머지 부분을 투명하게 만들기 - 다른 요소의 배경이 적용될 때 예상대로 작동하지 않습니다. 라이트 박스 : 화면의 나머지 부분을 투명하게 만들 때의 문제

이 라이트 박스를 구현하기 위해 Z- 인덱스를 사용하려고했으나

난 당신이 C를 할 수 있도록 여기에 코드

<html> 
<style type="text/css"> 
.element{ 
    height: 200px; 
    width: 300px; 
    background: rgba(255,255,255,0.5); 
    z-index: 1; 
    border:1px solid black; 
    position: relative; 
    margin: 0 auto;} 
.black{ 
    position: relative; 
    background: rgba(0, 0, 0, 0.6) !important; 
    z-index: 200;} 
</style> 
<body class="black"> 
<div class="element">Hello,i have to go to the background 
    but am not going cos my immediate parent isnt 
    letting me,even though my grand dad asked me to!!.. 
</div> 
</body> 
</html>

이야, 설명에 나쁜거야 실패, 사업부가 아닙니다 배경이 아니라 전경입니다. div 안에 배경이 설정되어 있지 않아도 - 해결할 수 있지만 작업하고있는 사이트가 너무 많은 배경을 가지고있어 (그렇게 할 수 없습니다.)

도와주세요, 초보자

출처

2011-09-21 Vivek Chandra

는 "투명 디스플레이의 나머지 부분"이란 무엇을 의미합니까? – mikerobi

백그라운드에서 화면의 나머지 부분. 센터에서 div와 몸체의 불투명도 –

몸체 불투명도에 대해 이야기하는 것은 매우 혼란 스럽습니다. 투명한 몸체는 브라우저 밑의 창을 통해 볼 수 있습니다! – mikerobi

질문을 이해하면 라이트 박스 아래의 전체 화면을 덮을 투명 오버레이가 필요합니다.

이 작업을 수행하는 적절한 방법은 전체 화면을 표시하는 전체 화면 부동 div를 만드는 것입니다. CSS는 이렇게 보일 것입니다.

.overlay { 
    position:absolute; 
    top:0; 
    left:0; 

    width:100%; 
    height:100%; 

    background: rgba(0, 0, 0, 0.6); 
    z-index: 0; 
}

그런 다음 추가 할 <div class="overlay"></div>

출처

2011-09-21 13:54:47 mikerobi

라이트 박스 : 화면의 나머지 부분을 투명하게 만들 때의 문제

답변

관련 문제