div 안에 다른 요소에 영향을 미치지 않으면 어떻게 불투명도를 적용합니까?

Question

원 나는 div에 불투명도를 적용합니다. div 내의 다른 모든 요소는 부모 div와 동일한 불투명도를 얻습니다. 그 중 자식은 불투명도를 가지지 않기를 원합니다. 도움을 주시면 고맙겠습니다.

Answer 1

간단한 대답 : 불가능합니다. 마크 업을 재구성해야합니다.

편집 - 당신은 설명을 원합니다.

CSS specs 상태

< alphavalue>

문법적 < 개수>. 균일 한 불투명도 설정은 전체 객체에 걸쳐 에 적용됩니다. 0.0 (완전 투명) ~ 1.0 (완전 불투명)의 범위를 벗어나는 값은이 범위로 고정됩니다. 객체가 컨테이너 요소 인 경우 마스크의 각 픽셀 값이 < 알파> 인 마스크를 사용하여 컨테이너 요소의 내용이 현재 배경과 혼합 된 것처럼 효과가 나타납니다. .

이는 컨테이너의 불투명도가 내용에 적용된다는 것을 의미합니다.

이미지, 양식 요소, 스크롤 막대 등 I 따라서이 같은 마크 업의 구조 조정 제안

에 영향을주지 않습니다 rgba 색상을 사용하여

해결 방법 :

<div style="position: relative"> 
    <div style="position: absolute; top: 0; left: 0; opacity: .5"> 
     <!-- semi-transparent content here --> 
    </div> 
    <div style="position: absolute; top: 0; left: 0;"> 
     <!-- fully opaque content here --> 
    </div> 
</div> 

Answer 2

당신은 단지를 제어 할 수 있습니다 부모의 특정 개별 구성 요소의 알파는 rgba() 색 표기법을 사용하여 div입니다. 그렇다하더라도, rgba()에 대한 브라우저 지원은 opacity에 대한 지원보다 약간 더 가난 그리고 당신은 그것으로 공급 업체 확장을 사용할 수 없습니다

: 당신이 브라우저 지원이 필요한 경우

#parent { 
    color: rgba(255, 255, 255, 0.5); 
    background-color: rgba(153, 0, 0, 0.5); 
} 

대신 색상의 투명 PNG 이미지를 사용

#parent { 
    color: rgba(255, 255, 255, 0.5); 
    background-image: url(bg.png); 
} 

opacity 속성을 설정하지 마십시오. 그렇지 않으면 부모 div에있는 모든 내용의 opacity은이 opacity에 상대적인 것이며 부모 opacity: 0.5과 자식 opacity: 2.0을 지정하면 작동하지 않습니다.