CSS で背景とテキスト要素に異なる不透明度を実現するにはどうすればよいですか?

CSS の背景の不透明度について理解する

CSS を使用する場合、要素の不透明度を設定するのは一般的なタスクです。ただし、背景要素と子要素の両方で不透明度を使用すると、混乱が生じる可能性があります。

質問:

背景と子要素の両方の不透明度が異なる場合、予期しない動作が発生します。異なる値を設定しても、コンテナ内のテキストは同じです。各要素の不透明度を個別に制御するにはどうすればよいですか?

答え:

CSS の不透明度は階層的に機能します。子要素は親コンテナの不透明度を継承します。したがって、コンテナの不透明度を特定の値に設定すると、その子の不透明度にも影響します。

解決策:

背景とテキストに異なる不透明度を実現するにはでは、次のオプションのいずれかを使用できます:

1。半透明の背景画像を使用する:

背景画像を透明な PNG ファイルとして保存します。これにより、テキストの完全な不透明度を維持しながら、背景を半透明にすることができます。

2.背景に RGBa カラーを使用:

RGBA 形式を使用して背景色を指定します。最後の値はアルファ チャネル (不透明度) を表します。 50% 色あせた黒の背景の例を次に示します。

<code class="css">div {
  background-color: rgba(0, 0, 0, 0.5);
}</code>

注:

子要素に不透明度を使用することは、意図しない表示につながる可能性があるため、通常はお勧めできません。特定のブラウザでの効果。

以上がCSS で背景とテキスト要素に異なる不透明度を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。