CSS background-color Eigenschaft
Die CSS-Eigenschaft background-color legt die Hintergrundfarbe eines Elements fest. Probiere die Beispiele aus.
Die CSS-Eigenschaft background-color legt die Hintergrundfarbe eines Elements fest. Die Farbe füllt den Inhalts-, Innenabstands- und Rahmenbereich des Elements, jedoch nicht den Außenabstand — Margins sind immer transparent und lassen den Hintergrund des übergeordneten Elements durchscheinen.
Diese Seite behandelt die Syntax der Eigenschaft, die verwendbaren Farbformate, die speziellen Schlüsselwörter transparent und initial, die Animation der Farbe zwischen Zuständen und die Barrierefreiheitsregel, die Text lesbar hält.
Hintergrundfarbe festlegen
Du kannst jeden gültigen CSS-Farbwert übergeben. Die gängigsten Formate sind:
- Benannte Farben —
red,tomato,rebeccapurple. - HEX —
#ff0000(oder die 3-stellige Kurzform#f00), mit optionalem Alpha-Paar#ff000080. - rgb() / rgba() —
rgb(255, 0, 0),rgba(255, 0, 0, 0.5)für teilweise Transparenz. - hsl() / hsla() —
hsl(0, 100%, 50%), oft einfacher manuell anzupassen als HEX.
Du kannst Werte visuell mit unserem Color Picker auswählen oder die vollständige Referenz zu HTML Colors lesen.
background-color ist der einfachste Teil der background-Kurzschreibweise. Wenn du nur eine Volltonfarbe benötigst, setze sie einzeln statt die gesamte Kurzform auszuschreiben.
Achte immer auf ein ausreichendes Kontrastverhältnis zwischen der Hintergrundfarbe und dem darüberliegenden Text. WCAG fordert mindestens 4.5:1 für normalen Text (3:1 für großen Text), damit Menschen mit Sehschwäche die Seite lesen können. Verwende einen Kontrast-Checker, wenn du Dunkel-auf-Hell- oder Hell-auf-Dunkel-Kombinationen auswählst.
| Anfangswert | transparent |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Nein. |
| Animierbar | Ja. Die Hintergrundfarbe ist animierbar. |
| Version | CSS1 |
| DOM Syntax | object.style.backgroundColor = "#FFFFFF"; |
Syntax
Syntax der CSS-Eigenschaft background-color
background-color: color | transparent | initial | inherit;Beispiel der background-color-Eigenschaft:
Beispiel der CSS-Eigenschaft background-color
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #8ebc42;
}
</style>
</head>
<body>
<h2>Background-color Property Example</h2>
<p>Here the background-color is specified with a hex value.</p>
</body>
</html>![CSS-Eigenschaft background-color](https://api.w3docs.com/uploads/media/default/0001/03/0e320aa63c591a91d882bbc24e53bcfcffa18142.png "CSS background-color property" =420x)
Transparenz verwenden
Jedes Farbformat mit einem Alphakanal ermöglicht es, die Farbe halbtransparent über dem zu platzieren, was sich hinter dem Element befindet:
background-color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
background-color: hsla(120, 100%, 50%, 0.5); /* semi-transparent green */
background-color: #0000ff80; /* semi-transparent blue (8-digit hex) */Der vierte Wert (Alpha) reicht von 0 (vollständig transparent) bis 1 (vollständig opak). Anders als bei der Eigenschaft opacity wirkt eine Alpha-Hintergrundfarbe nur auf den Hintergrund — Text und untergeordnete Elemente bleiben vollständig opak.
Beispiel der background-color-Eigenschaft mit dem Wert "transparent":
Beispiel der CSS-Eigenschaft background-color mit dem Wert transparent
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: transparent;
}
</style>
</head>
<body>
<h2>Background-color Property Example</h2>
<p>In this example the background-color is set to transparent. This is the default value.</p>
</body>
</html>Beispiel der animierten Version der background-color-Eigenschaft:
Beispiel der CSS-Eigenschaft background-color mit Animation
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #eee;
animation: mymove 5s infinite;
}
@keyframes mymove {
30% {
background-color: #1c87c9;
}
100% {
background-color: #eee;
}
}
</style>
</head>
<body>
<h2> Animation of background-color property</h2>
<p>
In this example it gradually changes the background color from grey to blue, and back to grey.
</p>
</body>
</html>Da background-color animierbar ist, interpoliert der Browser fließend zwischen den beiden Farben. Dasselbe funktioniert mit CSS-Übergängen — zum Beispiel um den Hintergrund einer Schaltfläche beim :hover ein- und auszublenden.
Vererbung
background-color wird nicht vererbt. Jedes Element beginnt mit transparent, daher kopiert ein untergeordnetes Element nicht die Hintergrundfarbe des übergeordneten Elements — es lässt dessen Hintergrund einfach durchscheinen, sofern ihm keine eigene Farbe zugewiesen wird. Deshalb scheint das Setzen einer Farbe auf <body> die Seite zu „füllen": Untergeordnete Elemente sind transparent, und die Farbe des body scheint hinter ihnen hindurch.
Browserunterstützung
background-color ist seit CSS1 Teil der Spezifikation und wird in jedem Browser unterstützt, einschließlich aller Versionen des Internet Explorer. Die 4- und 8-stellige HEX-Notation mit Alpha (#rrggbbaa) ist die einzige neuere Ergänzung und erfordert einen einigermaßen modernen Browser; rgba() und hsla() sind überall sicher.
Werte
| Wert | Beschreibung | Ausprobieren |
|---|---|---|
| transparent | Dies ist der Standardwert und definiert die Hintergrundfarbe als transparent. Das bedeutet, es gibt keine Hintergrundfarbe. | Ausprobieren » |
| color | Legt die Hintergrundfarbe fest. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können verwendet werden. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |