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 July 2015.

Die background-color-Eigenschaft des CSS legt die Hintergrundfarbe eines Elements fest.

Probieren Sie es aus

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;

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

Werte

<color>

Die einheitliche Farbe des Hintergrunds. Sie wird hinter jedem angegebenen background-image gerendert, obwohl die Farbe durch jede Transparenz im Bild sichtbar bleibt.

Barrierefreiheit

Es ist wichtig, sicherzustellen, dass das Kontrastverhältnis zwischen der Hintergrundfarbe und der darüber gelegten Textfarbe hoch genug ist, damit Personen mit Sehbehinderungen den Inhalt der Seite lesen können.

Das Farbkontrastverhältnis wird ermittelt, indem die Leuchtdichte der Text- und Hintergrundfarbwerte verglichen wird. Um den aktuellen Web Content Accessibility Guidelines (WCAG) zu entsprechen, ist ein Verhältnis von 4,5:1 für Textinhalte und 3:1 für größeren Text wie Überschriften erforderlich. Als großer Text gelten 18,66px und fett oder größer, oder 24px oder größer.

Formale Definition

Initialer Werttransparent
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Berechneter Wertberechnete Farbe
AnimationstypFarbe

Formale Syntax

background-color = 
  <color>

Beispiele

Boxen einfärben

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

HTML

html
<div class="example-one">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="example-two">Lorem ipsum dolor sit amet, consectetuer</div>

<div class="example-three">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: #ffffff;
}

Ergebnis

Tabellen einfärben

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

HTML

html
<table>
  <tr id="r1">
    <td id="c11">11</td>
    <td id="c12">12</td>
    <td id="c13">13</td>
  </tr>
  <tr id="r2">
    <td id="c21">21</td>
    <td id="c22">22</td>
    <td id="c23">23</td>
  </tr>
  <tr id="r3">
    <td id="c31">31</td>
    <td id="c32">32</td>
    <td id="c33">33</td>
  </tr>
</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;
}

Ergebnis

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# background-color

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch