CSS3 속성 불투명도

Question

자녀가 아닌 부모 요소의 불투명도에만 영향을 줄 수있는 방법

예,

Signup_backdrop 불투명도가 0.5로 설정되기를 원하지만 Child Element Signup_box는 불투명도를 원하지 않지만 Signup_backdrop에서 설정 세트를 상속받은 것으로 적용합니다.

Answer 1

당신은 할 수 없습니다. 부모 위의 어린이를 슈퍼 라이브 (포지셔닝 및 Z- 인덱스)해야합니다. 즉, 더 이상 자녀가되지 않을 것입니다. 또는 부모 배경에 투명한 PNG를 사용하고 완전한 자식의 형제 자매에 대한 불투명도를 설정하십시오.

*테스트되지 않았지만 좋을 것입니다.

.signup_backdrop {
  position:fixed;
  top:0; left:0;
  background:#333333;
  width:100%; height:100%;
  z-index:10;
}
    
.signup_box {
  position:fixed;
  top:25%; left:25%;
  background:#ffffff;
  width:50%; height:50%;
  z-index:20;
}

<div class="signup_box">
   <p>Hello World</p>
</div>
<div class="signup_backdrop"></div>

Answer 2

CSS 3에서는 있습니다 rbga () 특정 요소에 색상과 불투명도를 추가합니다.
지금까지 Safari 3 및 Firefox 3에서만 구현되었습니다.
다른 브라우저의 경우 Jonathan Sampson의 대답의 트릭을 사용합니다.