子要素が親から不透明度を継承するのはなぜですか?それを防ぐにはどうすればよいですか?

子要素の不透明度の継承を解決する

親要素に不透明度を適用すると、子要素がこの不透明度を継承するという問題が発生する可能性があります。子要素に元の不透明度を維持させたい場合、これは望ましくない可能性があります。

一般的な想定に反して、この問題は継承だけが原因ではありません。代わりに、それは不透明度の計算方法に起因します。次の例を考えてみましょう。

<div id="parent">
    <div></div>
</div>

<div id="original"></div>

<div id="quarter"></div>

#parent div, #quarter {
    width: 100px;
    height: 100px;
    background-color: orange;
}

#parent div {
    opacity: 0.5;
}

#parent {
    opacity: 0.5;
}

#quarter {
    opacity: 0.25;
}

#quant の不透明度は #parent div の不透明度に等しいように見えますが、#parent div は実際には #quarter の 2 倍の不透明度を持ちます。これは次のフィドルで明らかです: https://jsfiddle.net/HUaNm/.

Solution

この問題に対する唯一の真の解決策は、親の外にある子要素。あるいは、効果は異なりますが、親の背景、境界線、またはフォントに不透明度の代わりに rgba カラーを採用することを検討することもできます。

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