Wie kann ich ein übergeordnetes Div transparent machen, ohne die untergeordneten Divs zu beeinträchtigen?

Deckkraft für übergeordnetes Div festlegen, ohne das untergeordnete Div zu beeinflussen

Die Frage bezieht sich auf das selektive Festlegen der Deckkraft für ein übergeordnetes Div, ohne die untergeordneten Elemente zu beeinflussen. Das Ziel besteht darin, die Transparenz nur für das übergeordnete Div aufrechtzuerhalten und gleichzeitig die untergeordneten Elemente undurchsichtig zu halten.

Eine effektive Lösung ist die Verwendung der rgba()-Methode, die Rot-, Grün- und Blauwerte (RGB) zusammen mit a angibt Transparenzwert (Alpha) mit einer Dezimalzahl zwischen 0 und 1.

Beachten Sie das folgende HTML und CSS Code:

<div>
<pre class="brush:php;toolbar:false">.parent {
  background-color: rgba(255, 0, 0, 0.5);
}

.child {
  color: black;
}

Im CSS legt die Eigenschaft „background-color“ für die Klasse .parent die Transparenz mithilfe der Methode rgba() auf 50 % fest. Das untergeordnete Element erbt die Farbeigenschaft, die auf Schwarz gesetzt ist.

Diese Lösung ermöglicht unabhängige Deckkrafteinstellungen für übergeordnete und untergeordnete Elemente, wobei die gewünschte Hintergrundtransparenz für das übergeordnete Div beibehalten wird und gleichzeitig die Deckkraft seiner untergeordneten Elemente erhalten bleibt .