Wie kann ich die Deckkraft des übergeordneten DIV steuern, ohne die Deckkraft des untergeordneten DIV zu beeinträchtigen?

Kontrolle der Deckkraft im übergeordneten DIV, ohne Auswirkungen auf das untergeordnete DIV zu haben

Bei der Webentwicklung kann es eine Herausforderung sein, Transparenzeffekte zu erzielen und gleichzeitig die Klarheit des Inhalts aufrechtzuerhalten. Eine häufige Anforderung besteht darin, die Deckkraft in einem übergeordneten DIV festzulegen, ohne die Deckkraft seiner untergeordneten DIVs zu beeinträchtigen.

Um diesen Effekt zu erzielen, können Sie die CSS-Opazitätseigenschaft innerhalb des übergeordneten DIV verwenden. Indem Sie die Deckkraft auf einen Wert zwischen 0 und 1 einstellen, regulieren Sie die Transparenz des Hintergrundinhalts innerhalb des übergeordneten DIV.

Beispiel:

Im folgenden CSS-Code setzen wir die Deckkraft des übergeordneten DIV auf 0,5, was eine Transparenz von 50 % für den Hintergrund ermöglicht Bild:

.parent {
  background-image: url(../images/madu.jpg);
  opacity: 0.5;
}

Beibehalten der Farbe des untergeordneten DIV bei Verwendung der Deckkraft

Um die schwarze Farbe des untergeordneten DIV beizubehalten, während die Deckkraft im übergeordneten DIV festgelegt wird, verwenden Sie Folgendes CSS-Eigenschaft innerhalb des untergeordneten DIV:

.child {
  color: black;
  background-color: transparent;
}

Durch Angabe der Hintergrundfarbe als transparent im untergeordneten DIV, der Farbe seines Textes bleibt auch mit dem Transparenzeffekt des übergeordneten DIV erhalten.

Das obige ist der detaillierte Inhalt vonWie kann ich die Deckkraft des übergeordneten DIV steuern, ohne die Deckkraft des untergeordneten DIV zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!