Wie verwende ich CSS-Farben?

Farbe kann auf viele verschiedene Arten in CSS vordefinierten Farbnamen, RGB, RGBA und unter Verwendung hexadezimaler Farbwerte verwendet werden. Das folgende CSS zeigt, dass bei Verwendung eines vordefinierten Farbnamens die Hintergrundfarbe auf „Lila“ gesetzt wird.

background-color: Purple;

Es gibt viele vordefinierte Farben in CSS und Sie können die Farbe wie oben beschrieben nur mit dem vordefinierten Namen anwenden. Nachfolgend finden Sie eine Liste vordefinierter Farben. Dabei handelt es sich nicht um alle vordefinierten Farben. Bei diesen Namen wird die Groß-/Kleinschreibung nicht beachtet, Sie können sie also alle in Groß- oder Kleinbuchstaben schreiben.

Schwarz, Weiß, Grau (oder Grau), Silber

Blau, Aqua, Cyan )

Crimsom (dunkelrot), Rot (rot)

Green (Grün), DarkGreen (Dunkelgrün), Lime (Limette)

Gold (Gold), Yellow (Gelb)

Pink (Pink), HotPink (Pink), Magenta ( Magenta)

Braun (braun), Maroon (kastanienbraun)

Lila (lila), Violett (violett)

Rot (rot), Grün (grün), Blau ( Blau) oder RGB ist eine weitere Möglichkeit, Farben in CSS festzulegen. Die RGB-Funktion empfängt drei Parameter, die jeweils Rot, Grün und Blau darstellen. Der Wert jeder Farbkomponente kann eine beliebige ganze Zahl von 0 bis einschließlich 255 sein. 0 ist der Mindestwert und bedeutet, dass die Farbe nicht angewendet wird. Die Blaukomponente im folgenden Code hat den Wert 0, sodass der Farbe kein Blau hinzugefügt wird. Wir stellen den Rotanteil auf den hellsten Wert und den Grünanteil auf die Hälfte (125) ein. Dadurch wird es auf Orange gesetzt.

background-color: rgb(255, 125, 0);

Transparenz ist eine weitere Sache, die in CSS auf Farben angewendet werden kann. Mithilfe der RGBA-Funktion können Sie einen zusätzlichen Parameter hinzufügen, um die Transparenz festzulegen. Alpha legt den Grad der Transparenz fest. Sein Wert ist eine Dezimalzahl von 0 bis 1, sodass 0,5 die halbe Transparenz darstellt. Der folgende Code setzt die Farbe ebenfalls auf Orange, setzt aber auch die Deckkraft auf die Hälfte, wodurch es einigermaßen transparent wird.

background-color: rgba(255, 125, 0, 0.5);

Die letzte Möglichkeit, Farben in CSS festzulegen, ist die Verwendung von Hexadezimalwerten. Hexadezimale Werte reichen von 0 bis F und geben jeder Farbkomponente zwei Teile, denen ein thematisches Symbol „#“ vorangestellt ist. Die alphabetischen Teile des Hexadezimalsystems von A bis F entsprechen den Ziffern 10 bis 15. Der folgende CSS-Code verwendet eine hexadezimale Darstellung von Orange. Der rote Teil wird als „FF“, der grüne Teil als „76“ und der blaue Teil als „00“ dargestellt. Die grüne Komponente ist nicht die Zahl 76, sondern die beiden Teile der Zahl 7 und der Zahl 6.

background-color: #FF7600;

Die Konvertierung von Hexadezimalwerten in häufig verwendete Dezimalwerte ist kompliziert, da Hexadezimalwerte die Basis 16 und Dezimalwerte die Basis 10 haben. Um hexadezimale Farben in gewöhnliche Dezimalzahlen umzuwandeln, müssen wir jede Zahl mit einer Potenz von 16 multiplizieren. Im Folgenden wird gezeigt, wie Hexadezimalwerte in gewöhnliche Dezimalzahlen umgewandelt werden.

FF = (15 16^0)^ + (15 16^1)^ = 15 1 + 15 16 = 15 + 140 = 255

76 = ( 7 16^0)^ + ( 6 16^1)^ = 7 1 + 6 16 = 7 + 96 = 103

00 = ( 0 16^0)^ + ( 0 16^1)^ = 0 1 + 0 16 = 0 + 0 = 0

Um die Berechnung zu vereinfachen, können wir einfach die erste Zahl einer Hexadezimalfarbe nehmen und die zweite Zahl mit 16 multiplizieren. Dies wird unten gezeigt, wobei die gleichen Zahlen wie oben verwendet werden. Dies liegt daran, dass jede Zahl, die mit 0 potenziert wird, gleich der Zahl 1 ist, und 16, hochgerechnet mit 1, gleich der Zahl 16 ist.

FF = 15 + (15 16) = 255

76 = 7 + ( 6 16) = 103

00 = 0 + ( 0 * 16) = 0

Empfohlenes Tutorial: „CSS-Tutorial“

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS-Farben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!