親要素に不透明度を適用しながら、子要素の不透明度を維持するにはどうすればよいですか?

親要素に適用する際に子要素の不透明度を維持する

親要素に不透明度を適用すると、不透明度プロパティはその子要素に継承されます。ただし、特定のシナリオでは、特定の子要素に対してこの継承された不透明度を「キャンセル」することが望ましい場合があります。

不透明度の継承は、HTML と CSS の基本的な動作です。子要素の不透明度が 1 に設定されている場合、後続の子要素の不透明度宣言に関係なく、常にその親の不透明度が継承されます。

解決策

継承された不透明度を完全にキャンセルすることはできませんが、同様の効果を達成できる代替アプローチがあります。

• 子要素を移動する: から子要素を削除します。親の DOM 階層を削除すると、親の不透明度は継承されなくなります。
• RGBa カラーを使用する: 不透明度を適用する代わりに、親要素の背景、境界線、またはテキストに rgba カラーを使用します。 。 RGBA カラーを使用すると、子要素の不透明度に影響を与えることなく透明度を指定できます。

例

次のコードを考えてみましょう:

<code class="html"><div class="parent">
  <div class="child"></div>
</div></code>

<code class="css">.parent {
  opacity: 0.6;
}</code>

この例では、子要素は親の不透明度 0.6 を継承します。

この継承を「キャンセル」するには、親の背景に rgba カラーを使用できます。

<code class="css">.parent {
  background-color: rgba(255, 165, 0, 0.6);
}</code>

これこの場合、親の背景は半透明になりますが、子要素は完全に不透明のままになります。

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