Heim > Web-Frontend > CSS-Tutorial > Wie kann ich ein übergeordnetes Div transparent machen, ohne die untergeordneten Divs zu beeinträchtigen?

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

Susan Sarandon
Freigeben: 2024-12-08 05:40:10
Original
155 Leute haben es durchsucht

How Can I Make a Parent Div Transparent Without Affecting Its Child Divs?

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>
Nach dem Login kopieren
.parent {
  background-color: rgba(255, 0, 0, 0.5);
}

.child {
  color: black;
}
Nach dem Login kopieren

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 .

Das obige ist der detaillierte Inhalt vonWie kann ich ein übergeordnetes Div transparent machen, ohne die untergeordneten Divs zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage