Detaillierte Erklärung der Lösung für CSS-Opazität untergeordneter Elemente, um die Transparenz übergeordneter Elemente zu übernehmen

Beim Schreiben der Projektseite stieß ich auf das Problem, dass untergeordnete Elemente die Transparenz übergeordneter Elemente erbten. Ich suchte in vielen Dokumenten und alle lieferten die erste Methode. Diese Methode löst hauptsächlich einfache Szenen, ist aber nicht mehr anwendbar, wenn ein komplexer Hintergrund festgelegt wird.

Analyse der Gründe:

Wenn die Hintergrundfarbe des übergeordneten Elements auf Opazität: 0,5 eingestellt ist, erbt das untergeordnete Element diese Farbe. Wenn Opazität: 1 für das untergeordnete Element eingestellt ist, wird die Transparenz des untergeordneten Elements ebenfalls basierend auf 0,5 des übergeordneten Elements eingestellt.

Erste Methode:

Vermeiden Sie beim Festlegen der Transparenz der Hintergrundfarbe des übergeordneten Elements die Verwendung von background: #000; opacity: 0.5. Es wird empfohlen, background: rgba(0,0,0,0.5) zu verwenden.

Zweite Methode:

Wenn als Hintergrundfarbe ein komplexer Hintergrund, beispielsweise ein Farbverlauf, eingestellt ist, ist die erste Methode nicht mehr anwendbar.

Hintergrundbild: linearer Farbverlauf (-180 Grad, RGBA (20,20,20,0,00) 19 %, Nr. 303030 100 %);
Deckkraft: 0,5;

Da untergeordnete Elemente die Opazitätseigenschaft ihrer übergeordneten Elemente erben, machen wir es nicht zu einem untergeordneten Element. Fügen Sie ein untergeordnetes Element hinzu, positionieren Sie es absolut zum übergeordneten Element und legen Sie dann die Hintergrundfarbe und Transparenz für das Element fest.

<div Klasse="Container">
    <div Klasse="Inhalt">
        <p>Ich bin ein DIV mit Klasseninhalten</p>
        <p>Mein Hintergrund ist der Hintergrund des Klassenhintergrunds</p>
        <p>Durch relative Positionierung und absolute Positionierung habe ich das DIV mit Klassenhintergrund an meine Position verschoben. </p>
        <p>Gleichzeitig sorgt mein größerer Z-Index dafür, dass es darauf schwebt. :)</p>
    </div>
    <div Klasse="Hintergrund"></div>
</div>

.container {
    Breite: 300px;
    Höhe: 250px;
    Farbe: #fff;
    Position: relativ;
}
.Inhalt {
    Position: relativ;
    z-Index: 5;
    Breite: 100 %;
    Höhe: 100%;
    Überlauf: versteckt;
}
.Hintergrund {
    Hintergrundfarbe: #37a7d7;
    Position: absolut;
    oben: 0px;
    links: 0px;
    Breite: 100 %;
    Höhe: 100 %;
    z-Index: 1;
    /*Kompatibel mit IE7, 8 */
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    Filter: Alpha (Deckkraft = 50);
    Deckkraft: 0,5;
}

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

Damit ist dieser Artikel über die Lösung, wie CSS-Opazitäts-Unterelemente die Transparenz von übergeordneten Elementen erben, abgeschlossen. Weitere Informationen dazu, wie CSS-Opazitäts-Unterelemente die Transparenz von übergeordneten Elementen erben, finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass Sie 123WORDPRESS.COM auch in Zukunft unterstützen werden!