CSS Text Deckkraft

Die Opazität wird in CSS als „Transparenz“ definiert. Die Deckkraft von Text ist der Transparenzeffekt, den wir auf einen beliebigen Text anwenden. Wir haben zwei verschiedene Eigenschaften in CSS, um die Deckkraft des Textes festzulegen. Um die Opazität des Textes festzulegen, verwenden wir sowohl die Eigenschaft "Deckkraft" als auch den Alpha-Wert, der die Deckkraft des Textes in "RGBA" bestimmt. Mit der Eigenschaft der Opazität und Änderung des Alpha -Werts in RGBA können wir die Deckkraft des Textes in CSS anpassen. Die Opazität reicht zwischen “0.0 ”und„ 1.0."Die" vollständig transparente "Farbe hat einen Wert von" 0 ".0 ”, während die Farbe„ total undurchsichtig “einen Wert von„ 1 hat.0 ". Wir werden CSS -Eigenschaften verwenden, um die Opazität des Textes in diesem Handbuch zu ändern.

Beispiel Nr. 1: Verwenden von Opacity -Eigenschaft

Wir brauchen einige Absätze, um die Opazitätsfunktion in CSS zu verwenden. Wir werden hier einige HTML -Absätze erstellen. Dazu müssen wir zuerst die HTML -Datei konstruieren. Visual Studio -Code ist die Software, die wir verwenden werden, um diese Beispiele durchzuführen. Sie können dies in jeder Software wie Notepad tun. Wir erstellen einige „Div“ -Kurse mit unterschiedlichen Namen im Körper. In jedem Div erstellen wir einen Absatz mit dem “

" Schild. Wir werden drei Divs mit einzigartigen Namen wie „T1“, „T2“ und „T3“ erstellen. Wir erstellen Absätze in diesen Divs. Infolgedessen wurden drei Absätze erstellt. Wir werden diesen HTML -Code auch für andere Beispiele verwenden. Jetzt gehen wir zur CSS -Datei und wenden die CSS -Deckkraft auf den Text an. Im Element "Head" des HTML -Codes haben wir die CSS -Datei zusätzlich mit dieser HTML -Seite verknüpft.

Wir setzen die ursprüngliche „rote“ Farbe auf die Überschrift, indem wir die Eigenschaft „Farbe“ verwenden und diese Überschrift als „kursiv“ stylen. Dann verwenden wir den Namen des ersten DIV "T1", in dem wir einen Absatz haben, und setzen seine "Schriftgröße" auf "16px". Wir verwenden das "Rot" für die Schriftart "Farbe". Aber in der nächsten Zeile verwenden wir die Eigenschaft „Deckkraft“. Wenn wir diese Eigenschaft verwenden, verleiht sie dem Transparenzeffekt unserer Textfarbe eine gewisse Deckkraft. Hier setzen wir eine „0.8 ”Wert für diese„ Deckkraft “-Fahrung. Für den nächsten „Div.T2 ”Absatz, wir setzen die gleiche„ Schriftgröße “„ 16px “und die gleiche„ rote “„ Farbe “. Aber diesmal wird der Wert der „Deckkraft“ in „0 geändert.5 ”für den Absatz des zweiten Divs. Für das dritte und das letzte „div.T3 ”, wir verwenden„ 0.3 ”als" Deckkraft "-Swert.

Hier ist die Ausgabe. Sehen Sie, dass die Farbe des Textes mit unterschiedlichen Opazitätswerten erscheint. Die Farbe des Überschriftens ist die ursprüngliche rote Farbe, aber die Farbe der Absätze erscheint mit einigen Deckkraftwerten. Alle drei Absätze haben unterschiedliche Opazitätswerte.

Beispiel Nr. 2: Verwenden Sie den Alpha -Wert in RGBA

Hier werden wir die RGBA -Werte verwenden, bei denen „A“ für den Alpha -Wert ist und dieser Alpha -Wert die Deckkraft des Textes festlegt. Zunächst setzen wir einfach den RGB -Wert auf die Überschrift und der RGB -Wert, den wir hier verwenden, repräsentiert die „lila“ Farbe. Dann verwenden wir das Schlüsselwort "kursiv", um das "Schriftarten" der Überschrift festzulegen. Wir setzen es auch als "Schriftfamilie" und nutzen dafür die "Algerische" Schriftart. Es ist im „Zentrum“ ausgerichtet, indem es die Eigenschaft „Text-Align“ nutzt.

Dann werden wir den ersten „Div.T1 ”und verwenden Sie den Wert" RGBA ". Hier setzen wir den "RGB" -Wert der lila Farbe und setzen dann seinen Alpha -Wert auch auf „0).9 ”. Danach setzen wir den gleichen "RGB" -Wert, änderten jedoch den Alpha -Wert und setzen ihn auf „0).7 ”. Außerdem haben wir einen weiteren Div -Absatz und für diesen letzten „Div.T3 ”Absatz, wir verwenden die„ 0.5 ”Alpha -Wert, der seine Deckkraft auf„ 0) festlegt.5 ”Wert.

Beachten Sie im Ergebnis, wie sich die Textfarbe abhängig vom Alpha -Wert ändert. Die Farbe der Überschrift ist das ursprüngliche Lila. Die Farbe der Absätze hat jedoch einige Alpha -Werte, die ihre Deckkraft festlegen. Die Opazitätswerte in allen drei Absätzen sind unterschiedlich.

Beispiel # 3:

Zunächst werden wir die „Hintergrundfarbe“ des gesamten Körpers festlegen und ihn auf „schwarz“ setzen. Dann verwenden wir erneut RGBA -Werte, wobei „A“ für den Alpha -Wert steht. Dieser Alpha -Wert bestimmt die Opazität des Textes, wie wir oben diskutiert haben. Zu Beginn fügen wir einfach den RGB -Wert zur Überschrift hinzu, die RGB -Nummer, die wir hier verwenden, symbolisiert die Farbe „hellgrau“. Wir verwenden das erste „Div.t1 ”und der„ rgba “-Wert, in dem wir den„ RGB “-Wert der gleichen Farbe wie die Überschrift einfügen und seinen Alpha -Wert auf„ 0 setzen.7 ”. Danach setzen wir den gleichen "RGB" -Wert wie zuvor. Diesmal haben wir den Alpha -Wert auf „0 geändert.4 ”. Wir haben auch einen weiteren Div -Absatz und verwenden die „0.2 ”Alpha -Wert, um die Opazität dieses letzten„ DIV “zu ändern.T3 ”Absatz zu„ 0.2 ”“.

Beobachten Sie, wie sich die Textfarbe ändert, wie sich der Alpha -Wert ändert. Die Überschrift ist die ursprüngliche Farbe, aber die Farbe der Absätze enthält Alpha -Werte, die ihre Deckkraft bestimmen. Alle drei Absätze haben unterschiedliche Opazitätswerte.

Beispiel Nr. 4:

Wir erstellen hier neun verschiedene DIV -Klassen mit einem eindeutigen Namen für jedes DIV und werden alle DIV -Werte getrennt in CSS anwenden.

Wir stylen den gesamten Körper und setzen den Text in die „Mitte“ der Seite. So erscheinen alle Absätze im „Zentrum“. Wir setzen auch "mutig" für den gesamten "Körper" mit "Schriftgewicht" und setzen die Größe der Schriftart oder des Textes auf "20px". Unsere Überschrift wird in der ursprünglichen „Maroon“ -Farbe angezeigt, während wir diese Farbe in der Eigenschaft „Farbe“ festlegen. Der "Algerianer" ist die "Schriftfamilie" für die Überschrift. Wir setzen die gleiche Farbe für alle DIVs mit der Eigenschaft „Farbe“. In allen Absätzen von Div haben wir den Wert der „Deckkraft“ geändert. In jedem Div verringern wir den Wert der Opazität durch ein solches für andere Divs, wir setzen den Wert der „Deckkraft“ auf „0).9 ”. Für die nächste DIV setzen wir dann den Wert dieser Opazitätseigenschaft auf „0.8 ”. Für die dritte Div verwenden wir „0.7 ”Deckkraftwert und so weiter. Auf diese Weise ändern wir jedes Mal die Opazitätswerte für jedes Div.

Schauen Sie sich hier die folgende Ausgabe an, die Werte der Textunfache von Text beginnen von „0.9 ”und enden bei„ 0.1 ”. Die ursprüngliche Farbe wird auch hier für die Überschrift verwendet und alle Absätze enthalten Depazitätswerte.

Abschluss:

Wir haben diesen Leitfaden für Sie erstellt, in dem wir die Deckkraft des Textes ändern und lernen, wie Sie die Deckkraft des Textes in CSS ändern können. Wir haben hier erklärt, dass Deckkraft zum transparenten Effekt dem Text verwendet wird. Wir haben auch die CSS -Eigenschaften untersucht, mit denen wir die Opazität des Textes ändern können. Wir haben beschrieben und gezeigt, wie die Eigenschaft „Deckkraft“ und der „Alpha“ -Wert von RGBA verwendet werden, um die Deckkraft des Textes zu ändern.