DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die `background-color`-Eigenschaft in CSS wendet Vollfarben als Hintergrund auf ein Element an. Hier ist ein Beispiel
html {
background-color: #82a43a;
}Das oben verwendete Beispiel (#82a43a) wird Hex-Code genannt und ist eine von mehreren Möglichkeiten, wie CSS eine einzelne Farbe darstellen kann. Es gibt eine Reihe von Möglichkeiten, die richtigen Hex-Codes zu finden. Jeder, der ein Designtool verwendet hat, hat einen Farbwähler ähnlich diesem gesehen
Hex-Codes sind eine Möglichkeit, eine Farbe in CSS zu deklarieren. Es gibt auch eine ganze Reihe von Namen, die Sie verwenden können, zum Beispiel
.page-wrap { background: white; }
footer { background: black; }
.almonds { background: blanchedAlmond; }Diese Farben sind nicht sehr flexibel, aber sie können im Notfall nützlich sein. Sie sind leichter zu merken als Hex-Codes, und es gibt eine Menge davon.
Eine weitere Möglichkeit, eine Farbe zu deklarieren, ist die Verwendung von RGB, RGBa, HSL oder HSLa
#page-wrap {
background: rgba(0, 0, 0, 0.8); /* 80% Black */
}
.widget {
background: hsla(170, 50%, 45%, 1);
}Im Gegensatz zu Hex-Codes ermöglichen diese Werte Transparenz (Alpha), was sehr nützlich sein kann. Erfahren Sie mehr über RGBa oder HSLa.
Demo
Browser-Unterstützung
| IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Alle | Alle | Alle | Alle | Alle | Alle |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| Alle | Alle | Alle | 90+ | 62+ |
Weitere Informationen
CSS Grundlagen: Fallback-Farben verwenden
CSS Basics: Multiple Backgrounds verwenden
Designüberlegungen: Text auf Bildern
Hintergrundfarben zu SVGs mit dem Element „rect“ hinzufügen
7 Anwendungen für CSS Custom Properties
Verwandte Eigenschaften
background
.element { background: url(texture.svg) top center / 200px 200px no-repeat fixed #f8a100; }
background-attachment
.hero { background-attachment: fixed; }
background-blend-mode
.element { background-blend-mode: screen; }
background-clip
.element { background-clip: padding-box; }
background-color
element{ background-color: #ff7a18; }
background-image
.element { background: url(texture.svg); }
background-origin
.element { background-origin: border-box; }
background-position
.element { background-position: 100px 5px; }
background-repeat
.element { background-repeat: repeat-x; }
background-size
.element { background-size: 300px 100px; }
Gibt es keine Möglichkeit, die Länge der Hintergrundfarbe zu verkürzen? Beim Erstellen einer Website verwende ich gerne die CSS-Eigenschaft `background-color`. Wenn ich jedoch kurze 3-4-Buchstaben-Wörter verwende, erstreckt sich die Hintergrundfarbe über die gesamte Seite. Manchmal möchte ich nur einen kleinen Farbblock haben! Bitte helfen Sie mir! Danke.
backgroud:#333;background: rgb(0,0,0,0,7);
Ist es in rgba()-Format möglich, nur den Alpha-Wert allein anzugeben? Ich muss den Alpha-Wert allein bei Hover überschreiben.
Sie können den Alpha-Wert bei
:hoverüberschreiben, indem Sie die CSS-Eigenschaft erneut mit der gleichen Farbe und dem neuen Alpha-Wert schreiben.Hallo,
Was ist der beste Wert für "Alfa" in rgba()? Denn ich verwende diesen Alfa-Koeffizienten immer als Dezimalzahl (0,1 - 0,9) als Transparenz, die in rgba() deklariert wird. Ich weiß, dass es auch Werte von "1-255" gibt. Aber wenn wir eine Farbe als einfaches rgb() definieren wollen, ist das immer gleich rgba(), wenn wir "Alfa" von "1-255" deklarieren. Bitte sagen Sie es mir.
Ich benutze gerne Hex, wie kann ich einen Gradienten in RGB einfügen?