오버레이

Question

를 해결 : 나 이미지 밝은 검은 배경에 오버레이를 사용하고

http://clients.noxxie.nl/rashosting/

. 하지만 텍스트도 오버레이로 표시되며 이는 발생하지 않습니다.

아무도 지금 어떻게 고칠 수 있습니까?

Answer 1

.text 컨테이너의 글자 수는 이며 형제 콘텐츠로 상속됩니다. 당신은 (대신 불투명 용기상의 rgba 색상을 사용하여 문제를 해결할 수 있도록처럼 내가 생각 IE (IE9에서 이상 스파 스 지원)가 있지만 :

.text { 
background-color: rgba(0, 0, 0, 0.5); 
} 

또는 당신은 1x1 크기의 반투명 PNG를 사용할 수 있습니다 .. 그 컨테이너의 배경으로 이미지를 또 다른 방법은 오버레이 사업부를 작성하는 것, 절대적으로 불투명도와 .text 컨테이너와 같은 다른 모든 뭔가 뒤에 머물 충분히 낮은 z-index 다루 위치 :

HTML을

<div class="overlay">&nbsp;</div> 

.text 컨테이너의 내부에 .overlay div를 div 하단에 배치 할 수 있습니다.

CSS

.text { 
    position:relative; 
    z-index:10; 
} 

.overlay { 
    position:absolute; 
    top:0; right:0; bottom:0; left:0; 
    background-color:black; 
    opacity:0.5 
    z-index:1; 
}