CSS 不透明度子要素が親要素の透明度を継承するためのソリューションの詳細な説明

プロジェクトページの作成中に、子要素が親要素の透明度を継承するという問題に遭遇しました。多くのドキュメントを検索しましたが、すべて最初の方法が示されていました。この方法は主に単純なシーンを解決しますが、複雑な背景を設定する場合には適用できなくなりました。

理由の分析:

親要素の背景色が opacity: 0.5 に設定されている場合、子要素はそれを継承します。子要素に opacity: 1 が設定されている場合、子要素の透明度も親要素の 0.5 に基づいて設定されます。

最初の方法:

親要素の背景色の透明度を設定するときは、background: #000; opacity: 0.5 の使用を避けてください。background: rgba(0,0,0,0.5) を使用することをお勧めします。

2番目の方法:

背景色がグラデーションカラーなどの複雑な背景に設定されている場合、最初の方法は適用できなくなります。

背景画像: linear-gradient(-180deg, rgba(20,20,20,0.00) 19%, #303030 100%);
不透明度: 0.5;

子要素は親要素の不透明度プロパティを継承するため、子要素にはしません。子要素を追加し、親要素に対して絶対位置に配置し、要素の背景色と透明度を設定します。

<div class="コンテナ">
    <div class="content">
        <p>私はクラスコンテンツを持つ DIV です</p>
        <p>私の背景はクラスの背景です</p>
        <p>相対配置と絶対配置を使用して、クラスの背景を持つ DIV を自分の位置に移動しました。 </p>
        <p>同時に、z-index を大きくすると、その上に浮かぶようになります。 :)</p>
    </div>
    <div class="background"></div>
</div>

。容器 {
    幅: 300ピクセル;
    高さ: 250px;
    色: #fff;
    位置:相対;
}
。コンテンツ {
    位置:相対;
    zインデックス:5;
    幅: 100%;
    高さ: 100%;
    オーバーフロー: 非表示;
}
。背景 {
    背景色: #37a7d7;
    位置:絶対;
    上:0px;
    左:0px;
    幅:100%;
    高さ:100%;
    zインデックス:1;
    /*IE7、8と互換性あり*/
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(不透明度=50)";
    フィルター: アルファ(不透明度=50);
    不透明度:.5;
}

参考: https://www.cnblogs.com/liu-l/p/3890861.html

これで、CSS 不透明度子要素が親要素の透明度を継承する方法に関するこの記事は終了です。CSS 不透明度子要素が親要素の透明度を継承する方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CentOS 8.4 に Docker をインストールする詳細なチュートリアル

>>: インスピレーションを得るための7つのクールなダイナミックウェブサイトデザイン