Die CSS-Eigenschaft background-color setzt eine Elementhintergrundfarbe. Der Hintergrund eines Elements ist die Gesamtgröße des Elements, einschließlich Padding und Border (aber nicht Margin).
Um eine Hintergrundfarbe einzustellen, müssen Sie also eine beliebige Farbe wählen. Sie können Farben aus unserem Farbwähler auswählen. Die Farbe kann wie folgt geschrieben werden: ein Farbname - "red", ein HEX-Werte - "#ff0000" und ein RGB-Werte - "rgb(255,0,0)".
Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Hintergrundfarbe und der Farbe des darüber gelegten Textes hoch genug ist, damit Menschen mit einer Sehbehinderung den Inhalt der Seite lesen können.
| Anfangswert | transparent |
| Gilt für | Alle Elemente. Es gilt auch für ::first-letter und ::first-line. |
| Geerbt | Nein |
| Animierbar | Ja, die Hintergrundfarbe ist animierbar. |
| Version | CSS1 |
| DOM Syntax | object.style.backgroundColor = "#FFFFFF"; |
Syntax
background-color: color | transparent | initial | inherit;Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #8ebc42;
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft background-color.</h2>
<p>Hier ist background-color mit einem Hex-Wert angegeben.</p>
</body>
</html>Hier ist ein Beispiel mit dem Wert transparent.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: transparent;
}
</style>
</head>
<body>
<h2>Ein Beispiel für die Eigenschaft Background-color.</h2>
<p>In diesem Beispiel ist background-color auf transparent gesetzt. Das ist der Standadwert.</p>
</body>
</html>In diesem Beispiel können Sie die animierbare Version sehen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #eee;
animation: mymove 5s infinite;
}
@keyframes mymove {
30% {background-color: #1c87c9;}
}
</style>
</head>
<body>
<h2> Animation der Eigenschaft background-color.</h2>
<p>In diesem Beispiel ändert es allmählich die Hintergrundfarbe von grau nach blau und wieder nach grau.
<p>
</body>
</html>Werte
| Wert | Beschreibung |
|---|---|
| transparent | Dies ist der Standardwert und definiert die Hintergrundfarbe als transparent. Das bedeutet, dass es keine Hintergrundfarbe gibt. |
| color | Definiert die Hintergrundfarbe. Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() können eingegeben werden. |
| initial | Es setzt die Eigenschaft auf den Standardwert. |
| inherit | Es erbt die Eigenschaft von ihrem übergeordneten Element. |
Browser-Support
|
|
|
|
|---|---|---|---|
| 1.0+ | 1.0+ | 1.0+ | 3.5+ |
Übe dein Wissen
