子 Div に影響を与えずに親 Div を透明にするにはどうすればよいですか?

子 Div に影響を与えずに親 Div の不透明度を設定する

質問は、子要素に影響を与えずに親 Div の不透明度を選択的に設定することに関するものです。目標は、子要素を不透明に保ちながら、親 div のみの透明性を維持することです。

効果的な解決策の 1 つは、rgba() メソッドを利用することです。これは、赤、緑、青 (RGB) の値を指定します。 0 ～ 1 の間の 10 進数を使用した透明度の値 (アルファ)。

次の HTML と CSS を考慮してください。コード:

<div>
<pre class="brush:php;toolbar:false">.parent {
  background-color: rgba(255, 0, 0, 0.5);
}

.child {
  color: black;
}

CSS では、rgba() メソッドを使用して、.parent クラスの背景色プロパティが透明度を 50% に設定します。子要素は、黒に設定されている color プロパティを継承します。

このソリューションでは、親要素と子要素の不透明度を独立して設定でき、子要素の不透明度を維持しながら、親 div に必要な背景の透明度を維持できます。 .