質問: cssを使用してテキストや画像を透明な背景にするにはどうすればよいですか。 cssのみを使用して、要素のbackgroundを半透明にし、要素の内容(テキストと画像)を不透明にすることは可能ですか?テキストと背景を2つの別々の要素として持たずに、これを実現したいと思います。しようとすると: p { position: absolute; background-color: green; filter: alpha(opacity=60); opacity: 0.6; } span { color: white; filter: alpha(opacity=100); opacity: 1; } <p> <span>hello world</span> </p> 子要素は親の不透明度の影響を受けているように見えるので、opacity:1は親のopacity:0.6と相対的です。
回答: これが私のやり方です(これは最適ではないかもしれませんが、うまくいきます)。半透明にしたいdivを作成します。それにクラス/ idを与えます。 emptyのままにして閉じます。それに設定された高さと幅を与えます(例えば、300 x 300ピクセル)不透明度0.5または好きなものを背景色にします。次に、そのdivのすぐ下に、別のクラス/ idを持つ別のdivを作成します。その中に段落を作成し、そこにあなたのテキストを置きます。 divの位置をrelative、top:-295pxにします(これは、295ピクセルです)。それをわかりやすくするために2のzインデックスを与え、その不透明度が1であることを確認します。好きなように段落をスタイルしますが、寸法が最初のdivの寸法より小さくなるようにします。それでおしまい。これがコードです: .trans { opacity: 0.5; height: 300px; width: 300px; background-color: orange; } .trans2 { opacity: 1; position: relative; top: -295px; } .trans2 p { width: 295px; color: black; font-weight: bold; } <body> <div class="trans"> </div> <div class="trans2"> <p> text text text </p> </div> </body> これはsafari 2.xで動作します、私はinternet explorerについて知りません。