투명 상자를 통한 불투명 한 텍스트

Question

내 투명 상자 안에 불투명 한 텍스트를 넣고 싶습니다.

이

HTML :

이

<div id="Transparent_Box">           
    <div class="text">           
    <h1>Some opaque text</h1> 
    </div> 
</div> 

CSS는 :

때문에 상속의

#Transparent_box {  
    url(../images/header-bg.png); 
    background:url(../images/header-bg.png) repeat-x\0/; 
    background-position:center bottom, left top; 
    background-repeat:repeat-x; 
    overflow:hidden; 
    background-color:#FFF; 
    opacity: 0.6; 
    filter: alpha(opacity=60); 

} 

.text { 
float:left; 
margin-top:30px; 
width:490px; 
margin-left:20px; 
opacity: 1; 
filter: alpha(opacity=100); 
} 

.text h1 { 
    font-weight:900; 
    color:#FFF; 
    line-height:34px; 
    margin-top:8px; 
    opacity: 1; 
    filter: alpha(opacity=100); 
} 

, 텍스트가 항상 반투명 나타납니다 여기에 코드 샘플입니다. 내 투명 상자에 멋진 불투명 한 텍스트를 표시 할 수있는 방법이 있습니까?

background-image:url(../images/header-shadow.png), url(../images/header-bg.png); 
background:url(../images/header-bg.png) repeat-x\0/; 
background-position:center bottom, left top; 
background-repeat:repeat-x; 
background-color: rgba(0,0,0,0) 

이 아래 IE8과에서 작동한다 : 정확히했다

---

덕분에 그것은 ... 나는 또한 그것은이처럼 보이는 투명 .PNG 인 배경을 추가 해주기있다.

Answer 1

불투명도 대신 투명한 배경색을 사용하십시오. 추가 마크 업이 필요하지 않습니다. RGBA 아래 IE8 이상에서 작동하지 않습니다

div { 
    background: rgba(0,0,0,.5) 
} 

는

Demo