2

透明なボックス内に不透明なテキストを入れたいです。コードサンプルは次のとおりです。

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);
}

継承のため、テキストは常に半透明で表示されます。透明なボックスの上に素敵な不透明なテキストを表示する方法はありませんか?

まさにそれでした...透明な.pngの背景も追加しました。次のようになります。

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 以下で動作するはずです。

4

1 に答える 1

7

不透明度の代わりに透明な背景色を使用します。追加のマークアップは必要ありません。

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

デモ

于 2012-11-30T00:13:02.987 に答える