css - 不透明度が 0.5 の div 内のテキスト

Question

内部にテキストを含む div コンテナーがあります。

問題は、コンテナの不透明度を 0.5 に設定していて、テキストの不透明度を 1 にしたいのですが、div のために 0.5 を超えることはできません。

スタイルシートで「p」が不透明度1.0になるようにそれぞれ作ったのですが、それでもうまくいきません。

何か案は？

Answer 1

プロパティはすべての子要素 ​​(テキスト ノードを含む) に継承さrgba()れるため、コンテナー div で代わりに使用して不透明度を設定します。opacity

Answer 2

特定の状況を見ずに言うのは難しいですが、要素はその親と同じくらい不透明にすることができます.

1 つの解決策は、現在の div のように機能する div の子である別の div を持つことです。2番目のdivposition: relativeと透明なdivを作成position: absolute; width: 100%; height: 100%;すると、背景が透明になります。メイン div の他の子は、完全な不透明度を持つことができます。position: relative最初の div がそれらをカバーしないようにする必要があります。

http://jsfiddle.net/ExplosionPIlls/ngW9m/1/

Answer 3

これは私が持っているすべてのブラウザで動作しているようです:

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/