CSS-Eigenschaft background-color

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>
Sie können hexadezimale, RGB, RGBA, HSL, HSLA oder oder Farbnamen als Wert für die Eigenschaft background-color eingeben. Erfahren Sie mehr über HTML-Farben.

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

chrome firefox safari opera
1.0+ 1.0+ 1.0+ 3.5+

Übe dein Wissen

Was genau steuert die CSS-Eigenschaft 'background-color' in einem HTML-Dokument?
Finden Sie das nützlich?