CSS/Eigenschaften/Hintergrundfarben und -bilder/background-color

Mit der Eigenschaft background-color kann einem Element eine Hintergrundfarbe zugewiesen werden. Ein Farbwähler kann Ihnen beim Ermitteln der Farbwerte helfen.

• 
• 
• 
• 
• 
• 

Erlaubt sind dabei folgende Werte:

• eine Farbangabe
• die Angabe transparent, (Ausgangswert)
• die Angabe currentColor, weist den Browser an, den berechneten Wert der Textfarbe des Elements zu verwenden
• die Angabe inherit, weist den Browser an, die Hintergrundfarbe des Elternelementes zu verwenden

Anwendungsbeispiel

Beispiel ansehen …

      h1   { background-color: lightgreen; }
      p    { background-color: #abc; }

In diesem Beispiel erhält die Überschrift einen hellgrünen Hintergrund, während der Textabsatz graublau eingefärbt wird.
Für das Code-Element hingegen ist keine Hintergrundfarbe festgelegt. Deshalb bekommt es die Voreinstellung, einen transparenten Hintergrund.

ansehen …

Transparenter Hintergund mit rgba

Wenn Sie nur den Hintergrund und nicht den Textinhalt durchscheinend darstellen wollen, verwenden Sie rgba-Farbangaben bei der Hintergrundfarbe.

Beispiel ansehen …

      .o0  { background-color: rgba(255, 255, 255, 0); }
      .o2  { background-color: rgba(255, 255, 255, 0.2); }
      .o4  { background-color: rgba(255, 255, 255, 0.4); }
      .o6  { background-color: rgba(255, 255, 255, 0.6); }
      .o8  { background-color: rgba(255, 255, 255, 0.8); }
      .o10 { background-color: rgba(255, 255, 255, 1); }

</source>

Das Beispiel entspricht weitgehend dem oberen. Die transparenz beschränkt sich aber auf den Hintergrund, der mit background-color und dem entsprechenden rgba-Wert.

ansehen …

Browser-Support für Farbangaben

Beachten Sie: Das Festlegen von Farben durch die Angabe von Farbton, Sättigung und Helligkeit mittels hsl(h,s%,l%) wird ebenso wie die Farbdefinitionen mit Transparenz (rgba(r,g,b,a) bzw. hsla(h,s%,l%,a)) nicht vom Internet Explorer 8 unterstützt.

Damit auch Browser, die dies nicht verstehen, eine Farbe anzeigen können, die der gewünschten nahe kommt, sollten Sie im CSS mehrere Angaben machen.

Beispiel

span {
  color: rgb(230,140,140);
  color: rgba(230,100,100,0.5);
}

Hier gilt für alle Browser zunächst die Farbangabe ohne Transparenz. Nur Browser, die auch die zweite Angabe verstehen, überschreiben mit dieser dann die erste.

Hinweis

Sie sollten sich in einem Projekt auf eine Variante der Farbdefinition beschränken.

Weblinks

• W3C: background-color