Wie der Name selbst sagt die Hintergrundfarbe Eigenschaft bestimmt die Hintergrundfarbe eines beliebigen Elements. Es kann verwendet werden, um die zu ändern Hintergrundfarbe eines einzelnen Elements, mehrerer Elemente, der gesamten Seite oder eines gesamten Dokuments.

In CSS können verschiedene Werte zugewiesen werden Hintergrundfarbe Eigenschaft als aufgeführter unten:

• Ein Farbname i.e. Rot, Gelb, Grün usw.,
• Die hexadezimalen Farbwerte i.e. #ff0000, 00ff00 usw.
• Der RGB -Wert wie RGB (255, 0, 0) usw.
• Die HSL -Werte wie (55, 45, 55) usw.

In diesem Bericht wird ein allgemeiner Überblick über die Eigenschaft von Hintergrundfarben enthalten. Es wird diskutiert, wie Sie der Eigenschaft von Hintergrundfarben unterschiedliche Werte zuweisen können.

So setzen Sie die Hintergrundfarbe mit Farbnamen

In CSS können wir die Hintergrundfarbe mit Farbnamen wie Rot, Grün, Blau usw. festlegen.

Beispiel 1: Das folgende Beispiel wird die Hintergrundfarbe für die gesamte Seite unter Verwendung des "Farbnamenwerts" festgelegt:

Willkommen bei LinuxHint.com

Beispielabsatz

Der obige Snippet gibt die Hintergrundfarbe mit internen CSS an. Es wird die folgende Ausgabe angezeigt:

So setzen Sie die Hintergrundfarbe mit hexadezimaler Farbcode

In CSS kann die Hintergrundfarbe mit hexadezimalen Farbwerten zugeordnet werden. Der hexadezimale Farbwert besteht aus a "#" Symbol gefolgt von drei oder sechs Ziffern Code.

Beispiel 2: Das untergegebene Snippet verwendet den hexadezimalen Farbcode, um die Hintergrundfarbe von Absatz-Tags mit internem Stil und Hintergrundfarbe von zu stylen

Verwenden von Inline -CSS:

Hintergrundfarbe mit Hex-Farbcode

Willkommen bei LinuxHint.com

Willkommen bei LinuxHint.com

Infolgedessen erzeugt es die folgende Ausgabe:

So setzen Sie die Hintergrundfarbe mithilfe von RGB-Farbcode

RGB-Farbcodes können verwendet werden, um die Hintergrundfarbe eines Elements festzulegen. Der RGB -Farbcode bestimmt die Farbe mit numerischen Werten zwischen 0 und 255. Die RGB -Farbe verwendet drei Hauptfarben i.e. (Rot, Grün und Blau), um verschiedene Farbkombinationen zu erzeugen.

Beispiel 3: Das folgende Beispiel erstellt eine externe CSS -Datei, um die Hintergrundfarbe verschiedener Elemente festzulegen. Es verwendet die RGB-Farbcodes, um die Hintergrundfarbe anzuwenden.

CSS -Datei:

Körper
Hintergrundfarbe: RGB (212, 212, 212);

H1
Hintergrundfarbe: RGB (0, 144, 158);

P
Hintergrundfarbe: RGB (137, 210, 236);

HTML -Datei:

Hintergrundfarbe mit RGB-Farbcode

Willkommen bei LinuxHint.com

Willkommen bei LinuxHint.com

Willkommen bei LinuxHint.com

Der obige Code generiert das folgende Ergebnis:

So setzen Sie die Hintergrundfarbe mit dem RGBA-Farbcode

Ein zusätzlicher Parameter Alpha (a) kann dem RGB -Farbcode hinzugefügt werden, der die Deckkraft einer Farbe bestimmt. Der Wert des Alpha -Parameters liegt zwischen 0.0 bis 1.0.

Beispiel 4: Der folgende angegebene Code erweiterte das vorherige Beispiel ein wenig und fügte den Wert für den Alpha -Parameter hinzu:

CSS -Datei:

Körper
Hintergrundfarbe: RGBA (212, 212, 212, 0.1);

H1
Hintergrundfarbe: RGBA (0, 144, 158, 0.1);

P
Hintergrundfarbe: RGBA (137, 210, 236, 0.1);

HTML -Datei:

Hintergrundfarbe mit RGB-Farbcode

Willkommen bei LinuxHint.com

Willkommen bei LinuxHint.com

Willkommen bei LinuxHint.com

Die einzige Änderung des vorherigen Beispiels (RGB) und dieses (RGBA) Beispiel ist der Alpha -Parameter. Vergleichen Sie die beiden Ausgänge. Sie werden einen klaren Unterschied feststellen:

So funktionierte der Alpha -Parameter.

So setzen Sie die Hintergrundfarbe mithilfe von HSL-Farbcode

CSS unterstützt eine weitere Farbkonvention namens HSL. HSL setzt eine Farbe in Bezug auf Farbton, Sättigung und Leichtigkeit.

Beispiel 5: Betrachten Sie den folgenden Code, der angibt, wie die HSL -Konvention funktioniert:

Hintergrundfarbe mit HSL-Farbcode

Willkommen bei LinuxHint.com

Willkommen bei LinuxHint.com

Der obige Code implementierte die Hintergrundfarbe auf

Und

Element mit HSL -Farbkonvention. Es wird die folgende Ausgabe angezeigt:

So setzen Sie die Hintergrundfarbe mithilfe von HSLA-Farbcode

Der Alpha -Parameter kann mit der HSL -Farbkonvention verwendet werden, um die Deckkraft einer Farbe anzugeben.

Beispiel 6: Erweitern wir den oben gegebenen Code etwas mehr und fügen Sie den Alpha-Parameter in die HSL hinzu:

Hintergrundfarbe mit HSLA-Farbcode

Willkommen bei LinuxHint.com

Willkommen bei LinuxHint.com

Der Ausgang beweist, dass der Alpha-Parameter der unten gezeigten Hintergrundfarbe die Deckkraft hinzugefügt hat:

Abschluss

CSS verwendete eine Hintergrundeigenschaft, um die Hintergrundfarbe auf einem Element, einer Seite usw. zu implementieren. Die Hintergrundfarbe kann unter Verwendung mehrerer Arten wie durch Angabe des Farbnamens, des hexadezimalen Werts, des RGB-Werts usw. zugewiesen werden.

Diese Beschreibung berücksichtigte die mehrfachen Farbkonventionen für die Eigenschaft von Hintergrundfarben. Es bietet eine detaillierte Anleitung zum Anwenden der Hintergrundfarbe mit „Farbnamen“, „Hexadezimalwerten“, „RGB, RGBA-Farbcodes“ und „HSL, HSLA-Farbcodes“.