투명도가있는 div에서 불투명 한 텍스트를 얻는 방법은 무엇입니까?

Question

나는 이것에 대해 구글 검색을했는데, 여러 가지 예가 많이 있었는데, 어떤 것은 오래되어 있지 않았던 것이다.

나는 또한 달성하고자하는 것과 비슷한 http://www.w3schools.com/Css/css_image_transparency.asp의 하단에있는 예를 살펴 보았습니다. 이 예제에서 div의 텍스트도 약간 투명하지만 흰색 div의 검정색 텍스트이므로보기가 어렵습니다.

많은 검은 색 요소가있는 배경 이미지가 있고 그 위에 55 % 불투명도의 검은 색 div가 있습니다. 배경 위에 아주 어두운 요소 중 일부에 흰색 텍스트를 추가하면 내가 원하지 않는 흰색 텍스트를 통해 약간 볼 수 있습니다.

투명한 png 또는 css로이 작업을 수행하는 방법에 대한 최근 사례가있는 사람이나 모범 사례가 있습니까? 그것은 IE 6을 지원할 필요가 없습니다.

미리 감사드립니다. 나는 텍스트가 투명해야한다 생각

Answer 1

밀라노 거의 정확 투명 배경을합니다. RGB를 통해 투명한 div의 배경을 투명하게 만들고 싶을 것입니다. 검은 색은 (0,0,0)입니다. 투명성을 추가하려면, 당신은 단순히 유사한 소수를 (추가 할 것 '불투명도 : 0.55'를 CSS를 위해, 그래서 55 % 불투명 한 검은 색을 얻기 위해, 당신은 예를 만들기 위해 그래서

background: rgba(0,0,0,0.55); 

을 사용하십시오 55 % 불투명도 w 배경/흰색 텍스트, 사용과 DIV :.

.blackopaque { 
    background:rbga(0,0,0,0.55); 
    color:#ffffff; 
} 

'배경'의 배경을 변경하고 색상 (이 경우, 흰색) 텍스트의 색상을 변경 희망이 도움이 ! 매트

EDIT : IE Sup 포트 IE에 지원을 추가하는 것은 쉽습니다. 특별히해야 할 일은 해당 요소에 대한 고유 한 스타일 시트가있는 IE 사용자입니다. 테마의 헤더 파일을여십시오. IE.css라는 투명한 검은 색 효과를 얻기 위해 투명한 PNG를 위해 특별히 디자인 된 스타일 시트가 있다고 가정 해 봅시다.

<!--[if IE]> 
    <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_url'); ?>/IE.css" /> 
<![endif]--> 

이 조건부 스타일 시트는 IE 사용자에게 자신이 사용할 수 있도록, 그래서 에헴의 나머지 부분은, 고급 브라우저는 RGBA을 즐길 수 있습니다 : 당신은 아래에 기존 CSS의 포함을이 코드 를 삽입 할 것입니다. 있도록 IE 스타일 시트에서 하나의 규칙은, 그냥 기본 규칙보다 우선

.blackopaque { 
background:url('*link to your 55% opaque png file*') 
color:#ffffff; 
} 

참고에만 포함해야 할 것 : IE의 스타일에 대한

, 당신이 뭔가를 원하는 것 그 배경에.

Answer 2

죄송합니다, 여기

#content { 
    position:relative; 
    z-index:1; 
} 

#content:before { 
    content:""; 
    position:absolute; 
    z-index:-1; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    background:url(your_image.jpg); 
    opacity:0.7; 
} 

Answer 3

RGBA는 IE9까지 지원되지 않으므로 이전 버전의 IE를 지원해야하는 경우 가장 좋은 방법은 반투명 PNG 만 사용하는 것입니다.