Hintergrundfarbe - einer der wichtigsten Aspekte jeder Website. Es bestimmt die Atmosphäre und Stimmung, die den Besuchern vermittelt werden. Das Ändern der Hintergrundfarbe kann Ihrer Website ein neues Aussehen verleihen und ihr eine Persönlichkeit verleihen.
In CSS (Cascading Style Sheets) gibt es mehrere Möglichkeiten, die Hintergrundfarbe zu ändern. Sie können die Verwendung von Schlüsselwörtern (z. B. "rot" oder "blau") oder Hexadezimalwerten (z. B. "#FF0000" oder "#0000FF") einschließen.
Wenn Sie eine einfache Hintergrundfarbe festlegen möchten, können Sie Schlüsselwörter verwenden. Beispiel: background-color: blue; legt die Hintergrundfarbe auf blau fest. Es gibt viele Schlüsselwörter, die hier verfügbar sind, wie "rot", "grün", "Gelb" und viele andere.
Wenn Sie eine genauere Kontrolle über die Hintergrundfarbe benötigen, können Sie hexadezimale Werte verwenden. Hexadezimale Werte stellen eine Kombination aus roten, grünen und blauen (RGB) Farben in einem Wert dar. Beispiel: background-color: #FF0000; Gib eine rote Hintergrundfarbe ein. Sie können mit verschiedenen Werten experimentieren, um den gewünschten Farbton zu finden.
Auswählen einer Hintergrundfarbe in CSS
Es gibt mehrere Möglichkeiten, eine Hintergrundfarbe in CSS auszuwählen:
1. Benannte Farben verwenden: CSS stellt einen vordefinierten Satz benannter Farben wie rot , Blau , Grün usw. bereit. Anwendungsbeispiel:
2. Hex-Code verwenden: Ein Hex-Code ist eine hexadezimale Darstellung einer Farbe. Es besteht aus dem Zeichen # , gefolgt von sechs Ziffern oder Buchstaben von 0 bis F . Zum Beispiel ist #FF0000 der Code für die Farbe Rot. Anwendungsbeispiel:
3. Verwenden von RGB-Werten: RGB ist die Abkürzung für Rot, Grün, Blau. In CSS werden RGB-Werte durch Zahlen zwischen 0 und 255 definiert, wobei 0 der minimale Wert und 255 der maximale Wert ist. Anwendungsbeispiel:
background-color: rgb(255, 0, 0);
4. Verwenden von RGBA-Werten: RGBA ist eine Erweiterung von RGB-Werten, die einen vierten Parameter hinzufügt - Transparenz. Der Transparenzwert wird durch eine Zahl zwischen 0 und 1 bestimmt, wobei 0 vollständig transparent und 1 vollständig undurchsichtig ist. Anwendungsbeispiel:
background-color: rgba(255, 0, 0, 0.5);
Die Auswahl der Hintergrundfarbe hängt von Ihren Vorlieben und Designzielen ab. Probieren Sie daher verschiedene Optionen aus, um die für Ihre Webseite am besten geeignete zu finden.
Verwenden von Stichwörtern zum Festlegen der Hintergrundfarbe
In CSS ist es möglich, die Hintergrundfarbe eines Elements mithilfe von Schlüsselwörtern festzulegen. Schlüsselwörter sind voreingestellte Werte, die Browser interpretieren und in einer bestimmten Farbe anzeigen können.
Einige der beliebtesten Keywords zum Einstellen der Hintergrundfarbe sind:
Um die Hintergrundfarbe mithilfe eines Schlüsselworts festzulegen, müssen Sie sie im Wert der background-color-Eigenschaft angeben:
/* Установка цвета фона с помощью ключевого слова */.my-element Im folgenden Beispiel wird für ein Element mit der Klasse .my-element der Hintergrund auf Blau gesetzt, da das Schlüsselwort blue im Wert der background-color-Eigenschaft angegeben ist.
Durch die Verwendung von Schlüsselwörtern zum Festlegen der Hintergrundfarbe können Sie die Farbe schnell und einfach einstellen, ohne dass bestimmte Werte in Hexadezimal- oder RGB-Notation angegeben werden müssen. Beachten Sie jedoch, dass die Verwendung von Schlüsselwörtern die Farbauswahl einschränkt und möglicherweise nicht für alle Designaufgaben geeignet ist.
Verwenden von RGB zum Ändern der Hintergrundfarbe
Um die Hintergrundfarbe festzulegen, müssen Sie die background-color-Eigenschaft und den Wert im RGB-Format verwenden. RGB besteht aus drei Zahlen, die durch ein Komma oder ein Leerzeichen getrennt sind. Jede Zahl stellt die Intensität der entsprechenden Grundfarbe von 0 bis 255 dar.
Wenn Sie beispielsweise die Hintergrundfarbe auf Rot festlegen möchten, können Sie den folgenden Code verwenden:
| Eigenschaft | Bedeutung |
|---|---|
| background-color | rgb(255, 0, 0) |
Dadurch wird die Hintergrundfarbe der Seite rot angezeigt.
Sie können auch zusätzliche Werte im Bereich von 0 bis 1 für jede Farbe verwenden, um genauere Farbtöne festzulegen. Zum Beispiel würde rgb(1, 0.5, 0) eine dunkelrote Farbe darstellen.
Mit RGB können Sie viele verschiedene Kombinationen von Hintergrundfarben in CSS erstellen und sie an Ihre Bedürfnisse anpassen. Haben Sie keine Angst, mit verschiedenen Werten zu experimentieren, um die perfekte Hintergrundfarbe für Ihre Website zu finden!
