투명 div 이미지 이상 불투명 한 텍스트

텍스트가 포함 된 투명한 검은 오버레이가있는 이미지를 보여주는 다음 HTML 코드가 있습니다.투명 div 이미지 이상 불투명 한 텍스트

텍스트가 투명하지 않습니다. 나는 z-index와 시도했지만 내 텍스트는 여전히 투명 : 내 코드를 잘못 무엇

Demo

이

내 HTML입니다 :

<div class="leftContainer"> 
    <div class = "promo"> 
     <img src="images/soon.png" width="415" height="200" alt="soon event" /> 

     <div class="hilight"> 
      <h2>Hockey</h2> 
      <p>Sample text</p> 
     </div> 

    </div> 

    ... 

</div>

이 내 CSS입니다 :

.hilight h2{ 
    font-family: Helvetica, Verdana; 
    color: #FFF; 
    z-index: 200; 
} 

.promo { 
    position: relative; 
} 
.promo img { 
    z-index: 1; 
} 

.hilight { 
    background-color: #000; 
    position: absolute; 
    height: 85px; 
    width: 415px; 
    opacity: 0.65; 
    font-family: Verdana, Geneva, sans-serif; 
    color: #FFF; 
    bottom: 0px; 
    z-index: 1; 
}

출처

2013-05-21 Pier-Alexandre Bouchard

변화 RGBA (0,0,0,0.65)에 .hilight의 배경과 투명도를 제거 .

.hilight { 
background-color: rgba(0,0,0,0.65); 
position: absolute; 
height: 85px; 
width: 415px; 
font-family: Verdana, Geneva, sans-serif; 
color: #FFF; 
bottom: 0px; 
z-index: 1; 
}

출처

2013-05-21 20:42:04

그냥이 대답은 이유에 일부 선명도를 추가 할을, 불투명도는 상속 CSS는 속성을 가진 부모의 모든 자식 노드도 불투명도로 스타일 지정됩니다. – Alex

rgba는 IE8에서 지원하지 않습니다. – claustrofob

IE8 때문에 rgba를 사용하지 않았습니다.하지만 작동합니다. 고맙습니다! –

내부에는 모두 0.65의 불투명도가 있습니다. 오버레이 div 외부로 텍스트를 이동하십시오.

출처

2013-05-21 20:42:30 claustrofob

전체 div 및 그 내용이 아닌 배경에만 불투명도를 설정해야합니다. 당신은 rgba 색상 선택 등

div { 
    background: rgba(0,0,0,0.50); 
}

으로 일부 background-position와 반투명 png 이미지를 사용하는 것하고의 다른 방법으로이 작업을 수행 할 수 있습니다. 그러면 멀티 브라우저 호환 가능

출처

2013-05-21 20:44:14 Vector

크로스 브라우저 지원의 경우 투명 1x1 픽셀 png 이미지을 사용하십시오.
당신은이 사이트에있는 이미지를 생성 할 수 있습니다 http://www.1x1px.me/이
그럼 그냥 background-color 및 opacity을 제거하고 단순히 background:url(bg.png);

jsFiddle Live Demo

출처

2013-05-21 21:02:38

투명 div 이미지 이상 불투명 한 텍스트

답변

관련 문제