44

div の背後にある背景画像の一部を表示するために、不透明度が 60% の div があります。不透明度が 60% であるため、その div のテキストは灰色で表示されます。

とにかくこのレベルをオーバーライドして、テキストを黒く見せる方法はありますか?

アドバイスをいただければ幸いです。

ありがとう。

4

5 に答える 5

72

要素ではなく背景に不透明度を設定します。

background-color: rgba(255,0,0,0.6);

少し前に、下位互換性のある方法でこれを実現する方法について書きました。

于 2010-03-08T14:31:04.863 に答える
4

私は自分のウェブサイトで過去にこれを実験しました。目的を実現する最も簡単な方法は、不透明度を 100% 未満 (つまり、部分的に透明) に設定した単一ピクセルの .PNG 画像を作成し、それを背景画像として使用することです。デフォルトでは、含まれている要素全体を塗りつぶします。そうでない場合は、CSS の background-repeat 属性が「repeat」に設定されていることを確認してください。

このようにすると、含まれている要素自体に透明度を設定する必要がないため、テキストの不透明度は影響を受けません。

驚くべきことに、半透明の単一ピクセルの .PNG を作成するためのツールがここにあるだけです。

于 2015-06-28T15:56:59.640 に答える
2

不透明度は、div 全体とそのすべての子に適用されます。残念ながら、その不透明度を元に戻すことはできません。さらに追加するだけです。それに加えて、CSS が要素内のテキストを選択する方法はありません。

あなたの場合、最良の解決策は、透明な背景画像 (PNG を使用) を div ブロックに適用することです。たとえば、不透明度が 60% の白い 1 ピクセルの画像です。

別の解決策は、Steven York によるこのチュートリアルで説明されているように、別のボックスと配置を使用することです。

于 2010-03-08T14:49:15.527 に答える
0

これはあなたの質問のほぼすべてに答えるはずです: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

于 2010-03-08T14:55:57.490 に答える
0

最も簡単な解決策は、正しい色で半透明の PNG を作成し、それを背景画像として使用することです。

レイアウトによっては別の解決策として、テキストを別のレイヤーに配置し、それを半透明部分の上に配置することもできます。次のようなものが機能します。

<div style="position: relative; background-image: url('your_image.jpg')">
    <div style="opacity: 0.5; background-color: #fff; position: absolute"></div>
    <div style="position: absolute">The text to go on top</div>
</div>

top必要に応じて、独自の位置/サイズ ( 、left、widthおよびheightプロパティ)を追加する必要があります。

于 2010-03-08T16:10:45.987 に答える