Warum erben untergeordnete Elemente die Deckkraft von ihren übergeordneten Elementen und wie kann ich dies verhindern?

Auflösen der Deckkraftvererbung für untergeordnete Elemente

Beim Anwenden von Deckkraft auf ein übergeordnetes Element kann das Problem auftreten, dass untergeordnete Elemente diese Deckkraft erben. Dies kann unerwünscht sein, wenn Sie möchten, dass die untergeordneten Elemente ihre ursprüngliche Deckkraft beibehalten.

Entgegen der typischen Annahme ist dieses Problem nicht ausschließlich auf die Vererbung zurückzuführen. Stattdessen liegt es an der Art und Weise, wie die Opazität berechnet wird. Betrachten Sie das folgende Beispiel:

<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;
}

Während es den Anschein hat, dass die Deckkraft von #quarter der von #parent div entspricht, hat #parent div tatsächlich die doppelte Deckkraft von #quarter. Dies wird in der folgenden Geige deutlich: https://jsfiddle.net/HUaNm/.

Lösung

Die einzig wahre Lösung für dieses Problem besteht darin, das physisch zu bewegen untergeordnetes Element außerhalb des übergeordneten Elements. Alternativ können Sie auch die Verwendung von RGBA-Farben für den Hintergrund, den Rahmen oder die Schriftart des übergeordneten Elements anstelle der Deckkraft in Betracht ziehen, obwohl der Effekt unterschiedlich sein wird.

Das obige ist der detaillierte Inhalt vonWarum erben untergeordnete Elemente die Deckkraft von ihren übergeordneten Elementen und wie kann ich dies verhindern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!