Wie kann ich den Hintergrund eines Divs undurchsichtig machen, ohne seinen Text zu beeinträchtigen?

CSS-Deckkraft nur für Hintergrundfarbe, aber nicht für Text

Problem:

Ist es möglich, die Deckkrafteigenschaft festzulegen ausschließlich für den Hintergrund eines Div, ohne Auswirkungen auf den darin enthaltenen Text?

Initial Versuch:

Der folgende Code wurde versucht:

background: #CCC;
opacity: 0.6;

Diese Methode konnte jedoch die Deckkraft des Hintergrunds nicht ändern.

Lösung:

Um einen transparenten Hintergrund zu erstellen, ohne den Text zu beeinträchtigen, sollten Sie die Verwendung von rgba() in Betracht ziehen. Funktion:

background: rgba(R, G, B, A);

rgba() Funktionssyntax:

• R, G, B: Ganze Zahlen oder Prozentsätze, die Rot, Grün- und Blauwerte.
• A: Alpha-Wert zwischen 0 und 1 oder ein Prozentsatz, wobei 1 für volle Deckkraft steht.

Beispiel:

background: rgba(51, 170, 51, 0.4);

Dieser Code erstellt einen Hintergrund, der zu 40 % undurchsichtig ist und eine grüne Farbe hat.

Browserkompatibilität:

Stand 2018 unterstützt praktisch jeder moderne Browser die rgba()-Syntax.

Das obige ist der detaillierte Inhalt vonWie kann ich den Hintergrund eines Divs undurchsichtig machen, ohne seinen Text zu beeinträchtigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!