`background-color` CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die background-color CSS-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 id="default-example">
  <div class="transition-all" id="example-element"></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;

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

Werte

<color>: Die einheitliche Farbe des Hintergrunds. Sie wird hinter einem gegebenenfalls spezifizierten background-image gerendert, obwohl die Farbe noch durch jegliche Transparenz im Bild sichtbar sein wird.

Es ist wichtig sicherzustellen, dass das Kontrastverhältnis zwischen der Hintergrundfarbe und der Farbe des darüber platzierten Textes hoch genug ist, damit Personen mit Sehschwächen den Inhalt der Seite lesen können.

Das Farbkontrastverhältnis wird bestimmt, indem die Leuchtdichte der Text- und Hintergrundfarbwerte verglichen wird. Um die aktuellen Web Content Accessibility Guidelines (WCAG) zu erfüllen, ist ein Verhältnis von 4,5:1 für Textinhalt und 3:1 für größeren Text, wie Überschriften, erforderlich. Großer Text ist als 18,66px und fett oder größer oder 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

Kästen einfärben

Dieses Beispiel demonstriert die Verwendung von background-color auf HTML-<div>-Elementen mit verschiedenen CSS-<color>-Werten.

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: white;
}

Ergebnis

Tabellen einfärben

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

HTML

html

<table>
  <tbody>
    <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>
  </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;
}