Bakgrunnsfargeegenskapen i CSS bruker solide farger som bakgrunn på et element. Her er et eksempel:
html ( background-color: #82a43a; )Eksemplet som brukes ovenfor ( #82a43a) kalles en heksekode, og det er en av flere måter at CSS må representere en enkelt farge. Det er flere måter å finne de riktige heksekodene på. Alle som har brukt et designverktøy har sett en fargevalg som ligner på denne:
Hex-koder er en måte å erklære en farge i CSS. Det er også en hel haug med navn du kan bruke, for eksempel:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Disse fargene er ikke veldig fleksible, men de kan komme godt med i en klype. De er lettere å huske enn heksekoder, og det er mange av dem.
En annen måte å erklære en farge på er å bruke RGB, RGBa, HSL eller HSLa:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )I motsetning til heksekoder tillater disse verdiene transparens (alfa), noe som kan være veldig nyttig. Lær mer om RGBa eller HSLa.
Demo
Se bakgrunnsfargen til pennen av CSS-Tricks (@ css-tricks) på CodePen.
I slekt
- bakgrunn-vedlegg
- bakgrunn-klipp
- bakgrunnsbilde
- bakgrunn-opprinnelse
- bakgrunn-posisjon
- bakgrunn-gjenta
- bakgrunnsstørrelse
Flere ressurser
- CSS3 spesifikasjon
- MDN
Nettleserstøtte
Hex-koder og de fleste fargenavn fungerer overalt. RGBa og HSLa har sine egne sett med nettleserstøtte: RGBa og HSLa.
| Chrome | Safari | Firefox | Opera | DVS | Android | iOS |
|---|---|---|---|---|---|---|
| Virker | Virker | Virker | Virker | Virker | Virker | Virker |