CSS background-color-Eigenschaft
CSS background-color property sets an element background color. The background of an element is the total size of the element. Try the examples.
Die CSS-Eigenschaft background-color legt die Hintergrundfarbe eines Elements fest. Der Hintergrund deckt den Content-, Padding- und Border-Bereich ab (nicht jedoch den Margin).
Sie können Farben über unser Color Picker-Tool auswählen. Farben können als Farbname (z. B. "red"), HEX-Wert (z. B. "#ff0000") oder RGB-Wert (z. B. "rgb(255,0,0)") angegeben werden.
Es ist wichtig, sicherzustellen, dass das Kontrastverhältnis zwischen der Hintergrundfarbe und der Textfarbe, die darüber platziert ist, hoch genug ist, damit Menschen mit Sehschwäche den Seiteninhalt lesen können.
| 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 background-color-Eigenschaft
background-color: color | transparent | initial | inherit;Beispiel für die background-color-Eigenschaft:
Beispiel für die CSS background-color-Eigenschaft
<!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>
info
Sie können hexadezimale Werte, RGB, RGBA, HSL, HSLA oder Farbnamen als Wert für die background-color-Eigenschaft festlegen. Erfahren Sie mehr über HTML-Farben.
background-color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
background-color: hsla(120, 100%, 50%, 0.5); /* semi-transparent green */Beispiel für die background-color-Eigenschaft mit dem Wert "transparent":
Beispiel für die CSS background-color-Eigenschaft mit transparentem Wert
<!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 für die animierte Version der background-color-Eigenschaft:
Beispiel für die CSS background-color-Eigenschaft 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>Werte
| Wert | Beschreibung | Abspielen |
|---|---|---|
| transparent | Dies ist der Standardwert und definiert die Hintergrundfarbe als transparent. Das bedeutet, dass keine Hintergrundfarbe vorhanden ist. | Abspielen » |
| color | Definiert die Hintergrundfarbe. Es können Farbnamen, hexadezimale Farbcodes, rgb(), rgba(), hsl(), hsla() verwendet werden. | Abspielen » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Abspielen » |
| inherit | Erbt die Eigenschaft von ihrem übergeordneten Element. |
Praxis
Was ist der Zweck der Verwendung der 'background-color'-Eigenschaft in CSS?