Baggrundsfarveegenskaben i CSS anvender solide farver som baggrund på et element. Her er et eksempel:
html ( background-color: #82a43a; )Eksemplet brugt ovenfor ( #82a43a) kaldes en hex-kode, og det er en af flere måder, som CSS skal repræsentere en enkelt farve. Der er en række måder at finde de rigtige hex-koder på. Enhver, der har brugt et designværktøj, har set en farvevælger, der ligner denne:
Hex-koder er en måde at erklære en farve på i CSS. Der er også en hel masse navne, som du kan bruge, for eksempel:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Disse farver er ikke særlig fleksible, men de kan være nyttige i en knivspids. De er lettere at huske end hexkoder, og der er masser af dem.
En anden måde at erklære en farve på er at bruge RGB, RGBa, HSL eller HSLa:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )I modsætning til hex-koder giver disse værdier mulighed for gennemsigtighed (alfa), hvilket kan være super nyttigt. Lær mere om RGBa eller HSLa.
Demo
Se pennens baggrundsfarve af CSS-Tricks (@ css-tricks) på CodePen.
Relaterede
- baggrund-vedhæftet fil
- baggrund-klip
- baggrundsbillede
- baggrund-oprindelse
- baggrund-position
- baggrund-gentagelse
- baggrundsstørrelse
Flere ressourcer
- CSS3 spec
- MDN
Browsersupport
Hex-koder og de fleste farvenavne fungerer overalt. RGBa og HSLa har deres egne sæt browsersupport: RGBa og HSLa.
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbejder | Arbejder | Arbejder | Arbejder | Arbejder | Arbejder | Arbejder |