子に影響を与えずに親 DIV の不透明度を制御するにはどうすればよいですか?

ネストされた要素の不透明度の制御

ネストされた DIV 要素を操作する場合、親要素の不透明度を調整せずに調整することが望ましい場合があります。その子供たちに影響を与えます。これは、背景色の CSS プロパティと rgba() 関数を使用して実現できます。

解決策:

親 DIV に影響を与えずに、親 DIV の不透明度を設定するには子 DIV には次の CSS を使用します構文:

.parent {
  background-color: rgba(r, g, b, a);
}

説明:

background-color プロパティは、要素の背景色を設定します。 rgba() 関数を使用すると、赤 (r)、緑 (g)、青 (b) の値を使用して色コンポーネントを指定できます。最後のパラメータ a は、アルファ透明度を表します。この値の範囲は 0 (完全に透明) から 1 (完全に不透明) です。

たとえば、子 DIV の色を維持しながら親 DIV を 50% 透明にするには、次の CSS を適用します。

.parent {
  background-color: rgba(0, 0, 0, 0.5);
}

注: この手法は、親要素の背景色にのみ適用されます。テキストの色やフォント サイズなど、子 DIV の他の視覚的プロパティには影響しません。

以上が子に影響を与えずに親 DIV の不透明度を制御するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。