Kolor tła - CSS-Tricks

Anonim

Właściwość background-color w CSS powoduje zastosowanie jednolitych kolorów jako tła elementu. Oto przykład:

html ( background-color: #82a43a; )

Przykład użyty powyżej ( #82a43a) nazywa się kodem szesnastkowym i jest to jeden z kilku sposobów, w jakie CSS musi przedstawiać pojedynczy kolor. Istnieje wiele sposobów na znalezienie odpowiednich kodów szesnastkowych. Każdy, kto używał narzędzia do projektowania, widział próbnik kolorów podobny do tego:

Zwróć uwagę na kod szesnastkowy w dolnej środkowej części.

Kody szesnastkowe to jeden ze sposobów zadeklarowania koloru w CSS. Jest też cała masa nazw, których możesz użyć, na przykład:

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

Te kolory nie są zbyt elastyczne, ale mogą się przydać w mgnieniu oka. Są łatwiejsze do zapamiętania niż kody szesnastkowe, a jest ich mnóstwo.

Innym sposobem zadeklarowania koloru jest użycie RGB, RGBa, HSL lub HSLa:

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

W przeciwieństwie do kodów szesnastkowych te wartości pozwalają na przezroczystość (alfa), co może być bardzo przydatne. Dowiedz się więcej o RGBa lub HSLa.

Próbny

Zobacz kolor tła pióra autorstwa CSS-Tricks (@ css-tricks) w CodePen.

Związane z

  • załącznik w tle
  • background-clip
  • zdjęcie w tle
  • pochodzenie tła
  • pozycja tła
  • powtarzanie tła
  • background-size

Więcej zasobów

  • Specyfikacja CSS3
  • MDN

Wsparcie przeglądarki

Kody szesnastkowe i większość nazw kolorów działają wszędzie. RGBa i HSLa mają własne zestawy obsługi przeglądarki: RGBa i HSLa.

Chrom Safari Firefox Opera TO ZNACZY Android iOS
Pracuje Pracuje Pracuje Pracuje Pracuje Pracuje Pracuje