Barva pozadí - Triky CSS

Anonim

Vlastnost barva pozadí v CSS aplikuje plné barvy jako pozadí na prvek. Zde je příklad:

html ( background-color: #82a43a; )

Příklad použitý výše ( #82a43a) se nazývá hexadecimální kód a je jedním z několika způsobů, jak musí CSS reprezentovat jednu barvu. Existuje několik způsobů, jak najít správné hexadecimální kódy. Každý, kdo použil návrhový nástroj, viděl podobný výběr barev:

Poznamenejte si hexadecimální kód ve spodní střední části.

Hex kódy jsou jedním ze způsobů deklarace barvy v CSS. Existuje také celá řada jmen, která můžete použít, například:

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

Tyto barvy nejsou příliš flexibilní, ale mohou se hodit hned. Jsou snadněji zapamatovatelné než hexadecimální kódy a je jich spousta.

Dalším způsobem, jak deklarovat barvu, je použití RGB, RGBa, HSL nebo HSLa:

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

Na rozdíl od hexadecimálních kódů tyto hodnoty umožňují průhlednost (alfa), což může být velmi užitečné. Další informace o RGBa nebo HSLa.

Ukázka

Podívejte se na barvu pozadí pera pomocí CSS-Tricks (@ css-tricks) na CodePen.

Příbuzný

  • příloha na pozadí
  • klip na pozadí
  • obrázek na pozadí
  • původ pozadí
  • pozice na pozadí
  • opakování pozadí
  • velikost pozadí

Další zdroje

  • CSS3 spec
  • MDN

Podpora prohlížeče

Hex kódy a většina barevných jmen fungují všude. RGBa a HSLa mají své vlastní sady podpory prohlížeče: RGBa a HSLa.

Chrome Safari Firefox Opera TJ Android iOS
Funguje Funguje Funguje Funguje Funguje Funguje Funguje