web-dev-qa-db-ja.com

CSS-不透明度の低いdivの不透明なテキスト？

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

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

助言をいただければ幸いです。

ありがとう。

cssopacity
42
Dan

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

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

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

68
Quentin

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

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

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

4
JohnTheTinkerer

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

あなたの場合、最善の解決策は、透明な背景画像（PNG付き）をdivブロックに適用することです。

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

2
Johann Philipp Strathausen

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

0
CIDIC

最も簡単な解決策は、正しい色で半透明の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プロパティ）を追加する必要があります。

0
DisgruntledGoat