Hintergrundfarbe - CSS-Tricks

Anonim

Die Eigenschaft Hintergrundfarbe in CSS wendet Volltonfarben als Hintergrund auf ein Element an. Hier ist ein Beispiel:

html ( background-color: #82a43a; )

Das oben verwendete Beispiel ( #82a43a) wird als Hex-Code bezeichnet und ist eine von mehreren Möglichkeiten, wie CSS eine einzelne Farbe darstellen muss. Es gibt verschiedene Möglichkeiten, die richtigen Hex-Codes zu finden. Jeder, der ein Designwerkzeug verwendet hat, hat einen ähnlichen Farbwähler gesehen:

Beachten Sie den Hex-Code in der unteren Mitte.

Hex-Codes sind eine Möglichkeit, eine Farbe in CSS zu deklarieren. Es gibt auch eine ganze Reihe von Namen, die Sie verwenden können, zum Beispiel:

.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )

Diese Farben sind nicht sehr flexibel, können aber zur Not nützlich sein. Sie sind leichter zu merken als Hex-Codes, und es gibt eine Menge davon.

Eine andere Möglichkeit, eine Farbe zu deklarieren, ist die Verwendung von RGB, RGBa, HSL oder HSLa:

#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )

Im Gegensatz zu Hex-Codes ermöglichen diese Werte Transparenz (Alpha), was sehr nützlich sein kann. Erfahren Sie mehr über RGBa oder HSLa.

Demo

Siehe die Hintergrundfarbe des Stifts von CSS-Tricks (@ css-Tricks) auf CodePen.

verbunden

  • Hintergrund-Anhang
  • Hintergrund-Clip
  • Hintergrundbild
  • Hintergrundherkunft
  • Hintergrundposition
  • Hintergrund Wiederholung
  • Hintergrundgröße

Mehr Ressourcen

  • CSS3-Spezifikation
  • MDN

Browser-Unterstützung

Hex-Codes und die meisten Farbnamen funktionieren überall. RGBa und HSLa haben ihre eigene Browserunterstützung: RGBa und HSLa.

Chrom Safari Feuerfuchs Oper IE Android iOS
Funktioniert Funktioniert Funktioniert Funktioniert Funktioniert Funktioniert Funktioniert