子要素が不透明度を継承しないようにするにはどうすればよいですか?

CSS の背景の不透明度と継承について

CSS では、不透明度プロパティによって要素の透明度が制御されます。デフォルトでは、不透明度は 1.0 に設定されており、要素が完全に不透明であることを意味します。不透明度の値が低いほど、透明度が高くなります。

複数のネストされた要素が異なる不透明度値を持つ場合、子要素は親要素の不透明度を継承します。これは、明示的に指定しない限り、不透明度が低減された要素のすべての子も同じ不透明度を低減することを意味します。

継承された不透明度に関する問題への対処

提供されたコードでは、内部 div の不透明度は 1.0 ですが、親 div に設定された不透明度を継承しているため、不透明度 0.4 で表示されます。この問題を解決するには、いくつかのオプションがあります:

• 半透明の PNG 画像を使用します: 背景画像には、本質的に半透明の PNG ファイル (例: 、不透明度が減少しました）。これにより、テキストの完全な不透明度を維持しながら、背景が適切に透明になります。

• RGBA カラーを使用する: 背景色には、RGBA (赤、緑) を使用できます。 、青、アルファ）の値。アルファは透明度を表し、0 は完全に透明、255 は完全に不透明です。アルファ コンポーネントが 255 未満の RGBA 値を指定すると、テキストを完全に不透明に保ちながら、背景を半透明にすることができます。例:

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

  ログイン後にコピー

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