2011-01-24 2 views
1

나는 CSS 속성이 opacity입니다.투명성 및 텍스트 문제

박스와 잘 어울립니다 (50 % 또는 30 %의 검은 색) - 문제는 상자 안의 텍스트가 이고이 투명하다는 것입니다.

30 % 투명도로 상자에 텍스트를 100 % 흰색으로하고 싶습니다.

해결 방법은 조정할 CSS를 사용하거나 배경에 .png을 사용하고 opacity 설정을 잊어 버리는 것입니다.

100 % 불투명도 텍스트로 30 % 불투명도를 수행하는 방법을 알려주십시오. 사전에

감사

답변

4

당신의 선택은 다음과 같습니다

  • Using CSS3을 : background: rgba(255, 255, 255, 0.3). Live Demo
  • 2 개의 <div> 태그를 절대적으로 배치하십시오. 그 중 하나가 배경이고, opacity 설정이 있습니다. 두 번째 텍스트에는 텍스트가 있고 배경은 transparent입니다.
  • 궁금한 점이 있으시면 .png 파일에 30% 투명도를 사용할 수 있습니다. I

내가 IE에서 rgba 일을 할 수있는 방법을 읽은 것을 알고 있었다.

참조 : http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

.alpha60 { 
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(0, 0, 0); 
    /* RGBa with 0.6 opacity */ 
    background: rgba(0, 0, 0, 0.6); 
    /* For IE 5.5 - 7*/ 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); 
    /* For IE 8*/ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; 
} 
+1

IE가 실제로 자신의'rgba' 같은 속성을 사용하여 필터를 가지고있다. 여기에 유용한 생성기가 있습니다. http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/ – mqchen

+0

@mqchen : 감사합니다. 이것은 IE 필터를위한'startColorstr'와'endColorstr'를 생성하는 아주 쉬운 방법입니다. – thirtydot

0
#box { color:white; background-color:rgba(0,0,0,0.3); } 

참고 : RGBA가 IE6-8

에서 작동하지 않습니다