Text-Opazität in CSS ändern

1. Verwenden Sie die CSS-Eigenschaft opacity, um die Texttransparenz in CSS zu ändern
2. Verwenden Sie die Funktion rgba(), um die Texttransparenz in CSS zu ändern

In diesem Artikel werden zwei Methoden zum Ändern der Textdeckkraft in CSS vorgestellt.

Verwenden Sie die CSS-Eigenschaft opacity, um die Texttransparenz in CSS zu ändern

Die Eigenschaft opacity gibt die Transparenz eines Elements an. Sie wird im Allgemeinen auf einer Skala von 0 bis 1 angegeben, wobei 0 vollkommen transparent ist.

Das heißt, es ist völlig unsichtbar. Ebenso ist 1 vollständig undurchsichtig, und 0.5 kann als Maßstab für die Opazität des Elements angesehen werden, da es zu 50 % durchsichtig ist.

Erstellen Sie zum Beispiel ein p-Element und erstellen Sie eine Klasse davor. Geben Sie den Text Ihrer Wahl in das Element p ein.

Erstellen Sie als nächstes ein ähnliches p-Element mit der Klasse after. Wählen Sie in CSS die Klasse before und geben Sie als Textfarbe red an.

Stellen Sie für die Klasse after die Farbe auf red und die Eigenschaft opacity auf 0.4, je nach Wunsch auf einer Skala von 0 bis 1.

In ähnlicher Weise können wir auch die Deckkraft des Elements in Prozent angeben. 0% ist vollständig transparent und 100% ist vollständig undurchsichtig. Anstelle von 0.4 können wir auch 40% verwenden.

Beispielcode:

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color:red;
}
.after {
 color:red;
 opacity: 0.4;
}

Verwenden Sie die Funktion rgba(), um die Texttransparenz in CSS zu ändern

Die Funktion rgba() wird im Allgemeinen verwendet, um die Farbe in das Element einzufügen. Die Buchstaben in rgba() stehen für Rot, Grün, Blau und Alpha.

Es zeigt an, dass die Funktion vier Werte annimmt. Die Alpha-Option ist eine Erweiterung, die die Opazität des Elements angibt.

Wir können die Intensität der roten, blauen oder grünen Farbe als ganze Zahl zwischen 0 und 255 oder 0 % bis 100 % angeben. Bei Deckkraft können wir den Wert 0-1 angeben und natürlich den Bereich 0%-100%.

Wir können die Funktion rgba() als Option in der Eigenschaft color verwenden.

Für eine Demonstration verwenden wir dieselbe HTML-Vorlage wie im ersten Beispiel oben. Wählen Sie die Klasse before und schreiben Sie die Funktion rgba() in die Eigenschaft color in CSS.

Schreiben Sie den Wert 0, 0, 255 in die Funktion, das ist der Farbcode für blaue Farbe. Verwenden Sie den gleichen Farbcode für die Klasse after, aber fügen Sie 0.5 für den Deckkraftwert hinzu.

Infolgedessen erscheint der erste Text in Blau, während der zweite weniger undurchsichtig ist, wenn wir die Deckkraft darin einstellen.

Beispielcode:

 <p class="before">
 Liverpool
 </p>

 <p class="after">
 Liverpool
 </p>

.before {
 color: rgba(0, 0, 255);
}

.after {
 color: rgba(0, 0, 255, 0.5);
}

Unter Berücksichtigung aller Fakten haben wir also die Eigenschaft opacity und die Funktion rgba() verwendet, um die Texttransparenz zu ändern.