不透明なテキストの半透明の背景を取得するにはどうすればよいですか？

Question

私はこの方法をしようとしているが、私はちょうど2つのdivを入れて、私は最初に背景を追加し、それが半透明作り、私はそれを不透明にする最初のスタイルスタイル：

これはコードです：

<div id="container"> 
    <div id="opaquetext"> 
     This is a normal text 
     on a translucent background 
    </div> 
</div> 

とCSS：

#container { 
     background-color: #ffffff; /* the background   */ 
     filter:alpha(opacity=50); /* Internet Explorer  */ 
     -moz-opacity:0.5;   /* Mozilla 1.6 and below */ 
     opacity: 0.5;    /* newer Mozilla and CSS-3 */ 
    } 
    #opaquetext { 
     filter:alpha(opacity=100); /* discarded */ 
     -moz-opacity:1.0;   /* discarded */ 
     opacity: 1.0;    /* discarded */ 
    } 

私はそれが仕事だろうと思ったが、何らかの理由でそれはあまりにもテキストを透明にレンダリングします。

Answer 1

＃またはrgb（）の代わりにrgba（）を使用して背景を指定します。ここで、rgbaの最後の引数は背景の不透明度を表します。不透明度は、要素全体の不透明度を定義するためのものです。例：

background: rgba(255, 0, 0, 0.2) 

これについての詳細情報：http://www.css3.info/preview/rgba/

しかし、それは古いブラウザとIEとの互換性の問題を引き起こす可能性があります。古いブラウザをサポートしたい場合は、boltclockの答えに明示された透明な背景イメージの使用を検討する必要があります。

Answer 2

不透明スタイルは、要素全体（背景色と前景色の両方）の表示に影響します。スタイルは要素のツリーにも掛けられます。言い換えれば、あなたの内側divは、外側の不透明度が100％であるようにスタイルされています。div 50％不透明度の100％は、それが親要素と同じ不透明度で表示されることを意味します（50％）。

あなたはいつものようにあなたのテキストのためのcolor: #000000を指定することができ、どちらも2 div秒を必要とどちらも2つの回避策は、あります

• は、IEがサポートしていない透明の背景画像
  ^{を使用しますこの前にIE7}

• 使用background-color: rgba(255, 255, 255, 0.5)
  IEはIE9、モミの前にこれをサポートしていません ^{efoxはそれ以前にこれをサポートしていません3.5}

Answer 3

Opacity inheritingは、すべてのブラウザの標準動作です。と背景を作るために写真/画像ソフトを使用して

#opaquetext { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    filter:alpha(opacity=100); /* worked */ 
    -moz-opacity:1.0;   /* worked */ 
    opacity: 1.0;    /* worked */ 
} 

：

1. ＃1 opaquetextのスタイルで絶対位置を使用して：あなたは、子のdiv DIS-継承不透明にしたい場合は、2つの選択肢があります希望の不透明度、およびCSSのドロップ不透明度の設定

REF：

• http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
• http://www.wickham43.supanet.com/~wickham43/tutorial/opacity.html