background-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Diebackground-colorCSS Eigenschaft legt die Hintergrundfarbe eines Elements fest.

Probieren Sie es aus

background-color: brown;

background-color: #74992e;

background-color: rgb(255 255 128);

background-color: rgb(255 255 128 / 0.5);

background-color: hsl(50 33% 25%);

background-color: hsl(50 33% 25% / 0.75);

<section>  <div></div></section>

#example-element {  min-width: 100%;  min-height: 100%;  padding: 10%;}

Syntax

css

/* Keyword values */background-color: red;background-color: indigo;/* Hexadecimal value */background-color: #bbff00; /* Fully opaque */background-color: #bf0; /* Fully opaque shorthand */background-color: #11ffee00; /* Fully transparent */background-color: #1fe0; /* Fully transparent shorthand */background-color: #11ffeeff; /* Fully opaque */background-color: #1fef; /* Fully opaque shorthand *//* RGB value */background-color: rgb(255 255 128); /* Fully opaque */background-color: rgb(117 190 218 / 50%); /* 50% transparent *//* HSL value */background-color: hsl(50 33% 25%); /* Fully opaque */background-color: hsl(50 33% 25% / 75%); /* 75% opaque, i.e. 25% transparent *//* Special keyword values */background-color: currentColor;background-color: transparent;/* Global values */background-color: inherit;background-color: initial;background-color: revert;background-color: revert-layer;background-color: unset;

Diebackground-color Eigenschaft wird als ein einzelner<color> Wert angegeben.

Werte

<color>: Die einheitliche Farbe des Hintergrunds. Sie wird hinter jedem spezifiziertenbackground-image gerendert, obwohl die Farbe durch jede Transparenz im Bild trotzdem sichtbar bleibt.

Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Hintergrundfarbe und der Farbe des darüber liegenden Textes hoch genug ist, damit Personen mit Sehbehinderungen den Seiteninhalt lesen können.

Das Kontrastverhältnis von Farben wird durch den Vergleich der Leuchtdichte von Text- und Hintergrundfarbwerten bestimmt. Um den aktuellenWeb Content Accessibility Guidelines (WCAG) zu entsprechen, wird ein Verhältnis von 4,5:1 für Textinhalt und 3:1 für größeren Text wie Überschriften benötigt. Großer Text wird als 18,66px undfett oder größer bzw. 24px oder größer definiert.

Formale Definition

Anfangswert	`transparent`
Anwendbar auf	alle Elemente. Auch anwendbar auf`::first-letter` und`::first-line`.
Vererbt	Nein
Berechneter Wert	berechnete Farbe
Animationstyp	Farbe

Formale Syntax

background-color =
<color>

Beispiele

Boxen färben

Dieses Beispiel demonstriert das Anwenden vonbackground-color auf HTML<div> Elemente unter Verwendung verschiedener CSS<color> Werte.

HTML

html

<div>Lorem ipsum dolor sit amet, consectetuer</div><div>Lorem ipsum dolor sit amet, consectetuer</div><div>Lorem ipsum dolor sit amet, consectetuer</div>

CSS

css

.example-one {  background-color: transparent;}.example-two {  background-color: rgb(153 102 153);  color: rgb(255 255 204);}.example-three {  background-color: #777799;  color: white;}

Ergebnis

Tabellen färben

Dieses Beispiel zeigt die Verwendung vonbackground-color auf HTML<table> Elementen, einschließlich der<tr> Zeilen und<td> Zellen.

HTML

html

<table>  <tbody>    <tr>      <td>11</td>      <td>12</td>      <td>13</td>    </tr>    <tr>      <td>21</td>      <td>22</td>      <td>23</td>    </tr>    <tr>      <td>31</td>      <td>32</td>      <td>33</td>    </tr>  </tbody></table>

CSS

css

table {  border-collapse: collapse;  border: solid black 1px;  width: 250px;  height: 150px;}td {  border: solid 1px black;}#r1 {  background-color: lightblue;}#c12 {  background-color: cyan;}#r2 {  background-color: grey;}#r3 {  background-color: olive;}