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

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>background-color</title>
    <style>
      h1   { background-color: #abc; }
      p    { background-color: lightgreen; }
    </style>
  </head>
  <body>
    <h1>Hintergrundfarben festlegen</h1>
    <p>Dieses Beispiel demonstriert die Wirkung der Eigenschaft <code>background-color</code>.</p>
  </body>
</html>
In diesem Beispiel erhält die Überschrift einen hellen graublauen Hintergrund, während der Textabsatz hellgrün eingefärbt wird.
Für das Code-Element hingegen ist keine Hintergrundfarbe festgelegt. Deshalb bekommt es die Voreinstellung, einen transparenten Hintergrund.

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
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.
Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML