Farba pozadia - Triky CSS

Anonim

Vlastnosť background-color v CSS aplikuje plné farby ako pozadie na element. Tu je príklad:

html ( background-color: #82a43a; )

Príklad použitý vyššie ( #82a43a) sa nazýva hexadecimálny kód a je jedným z niekoľkých spôsobov, ako musí CSS predstavovať jednu farbu. Existuje niekoľko spôsobov, ako nájsť správne hexadecimálne kódy. Každý, kto použil návrhový nástroj, videl podobný výber farieb:

Všimnite si hexadecimálny kód v dolnej strede.

Hex kódy sú jedným zo spôsobov deklarovania farby v CSS. Existuje tiež veľa mien, ktoré môžete použiť, napríklad:

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

Tieto farby nie sú príliš pružné, ale môžu sa vám hodiť. Ľahšie si ich pamätajú ako hexadecimálne kódy a je ich kopa.

Ďalším spôsobom, ako deklarovať farbu, je použitie RGB, RGBa, HSL alebo HSLa:

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

Na rozdiel od hexadecimálnych kódov tieto hodnoty umožňujú priehľadnosť (alfa), čo môže byť veľmi užitočné. Získajte viac informácií o RGBa alebo HSLa.

Ukážka

Pozrite si farbu pozadia pera od CSS-Tricks (@ css-tricks) na CodePen.

Súvisiace

  • príloha na pozadí
  • klip na pozadie
  • obrázok na pozadí
  • pôvod pozadia
  • Pozícia na pozadí
  • opakovanie pozadia
  • veľkosť pozadia

Ďalšie zdroje

  • Špecifikácia CSS3
  • MDN

Podpora prehľadávača

Šesťhranné kódy a väčšina názvov farieb fungujú všade. RGBa a HSLa majú svoje vlastné sady podpory prehľadávačov: RGBa a HSLa.

Chrome Safari Firefox Opera IE Android iOS
Tvorba Tvorba Tvorba Tvorba Tvorba Tvorba Tvorba