Svojstvo background-color u CSS-u primjenjuje pune boje kao pozadinu na elementu. Evo primjera:
html ( background-color: #82a43a; )Primjer korišten gore ( #82a43a) naziva se heksadecimalni kod i to je jedan od nekoliko načina na koje CSS mora predstavljati jednu boju. Postoji nekoliko načina za pronalaženje pravih hex kodova. Svatko tko je koristio alat za dizajn vidio je birač boja sličan ovom:
Hex kodovi su jedan od načina deklariranja boje u CSS-u. Postoji i čitava hrpa imena koja možete koristiti, na primjer:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Ove boje nisu vrlo fleksibilne, ali mogu vam dobro doći u kratkom roku. Lakše ih je pamtiti od hex kodova, a ima ih na tone.
Drugi način deklariranja boje je upotreba RGB, RGBa, HSL ili HSLa:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )Za razliku od hex kodova, ove vrijednosti omogućuju transparentnost (alfa), što može biti vrlo korisno. Saznajte više o RGBa ili HSLa.
Demo
Pogledajte boju pozadine olovke od CSS-Tricks (@ css-tricks) na CodePenu.
Povezano
- pozadina-prilog
- pozadina-isječak
- pozadinska slika
- podrijetlo podrijetla
- pozadinski položaj
- pozadina-ponavljanje
- veličina pozadine
Više resursa
- CSS3 specifikacije
- MDN
Podrška preglednika
Hex kodovi i većina naziva boja djeluju svugdje. RGBa i HSLa imaju vlastite skupove podrške preglednika: RGBa i HSLa.
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Djela | Djela | Djela | Djela | Djela | Djela | Djela |