Wie kann die Deckkraft in untergeordneten Elementen beibehalten werden, während die Deckkraft auf das übergeordnete Element angewendet wird?

Beibehalten der Deckkraft in untergeordneten Elementen beim Anwenden auf das übergeordnete Element

Beim Anwenden der Deckkraft auf ein übergeordnetes Element wird die Deckkrafteigenschaft von seinen untergeordneten Elementen geerbt . In bestimmten Szenarien kann es jedoch wünschenswert sein, diese geerbte Deckkraft für bestimmte untergeordnete Elemente „aufzuheben“.

Die Vererbung der Deckkraft ist ein grundlegendes Verhalten von HTML und CSS. Wenn die Deckkraft eines untergeordneten Elements auf 1 gesetzt ist, erbt es immer die Deckkraft seines übergeordneten Elements, ungeachtet aller nachfolgenden Deckkraftdeklarationen für das untergeordnete Element.

Lösung

Obwohl es nicht möglich ist, die geerbte Deckkraft vollständig aufzuheben, gibt es alternative Ansätze, die einen ähnlichen Effekt erzielen können.

• Move Child Element خارج من الوالد: Durch Entfernen des untergeordneten Elements aus Wenn Sie die DOM-Hierarchie des übergeordneten Elements ändern, erbt es nicht mehr die Deckkraft des übergeordneten Elements.
• Verwenden Sie RGBa-Farben: Anstatt Deckkraft anzuwenden, verwenden Sie RGBA-Farben für den Hintergrund, den Rahmen oder den Text des übergeordneten Elements . RGBA-Farben ermöglichen eine Transparenzspezifikation, ohne die Deckkraft des untergeordneten Elements zu beeinträchtigen.

Beispiel

Bedenken Sie den folgenden Code:

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

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

In diesem Beispiel erbt das untergeordnete Element die Deckkraft des übergeordneten Elements von 0,6.

Um diese Vererbung „aufzuheben“, können Sie RGBA-Farben für den Hintergrund des übergeordneten Elements verwenden:

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

Dies würde zu einem halbtransparenten Hintergrund für das übergeordnete Element führen, aber das untergeordnete Element würde völlig undurchsichtig bleiben.

Das obige ist der detaillierte Inhalt vonWie kann die Deckkraft in untergeordneten Elementen beibehalten werden, während die Deckkraft auf das übergeordnete Element angewendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!