CSS rekvizīts fona krāsa pielieto pamatkrāsas kā elementa fonu. Lūk, piemērs:
html ( background-color: #82a43a; )Iepriekš izmantoto piemēru ( #82a43a) sauc par sešstūra kodu, un tas ir viens no vairākiem veidiem, kā CSS ir jāatspoguļo viena krāsa. Ir vairāki veidi, kā atrast pareizos sešstūra kodus. Ikviens, kurš ir izmantojis dizaina rīku, ir redzējis šim līdzīgu krāsu atlasītāju:
Hex kodi ir viens no veidiem, kā deklarēt krāsu CSS. Ir arī vesels virkne vārdu, kurus varat izmantot, piemēram:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Šīs krāsas nav ļoti elastīgas, taču tās var noderēt nedaudz. Viņus ir vieglāk atcerēties nekā sešstūra kodus, un to ir daudz.
Vēl viens veids, kā deklarēt krāsu, ir RGB, RGBa, HSL vai HSLa izmantošana:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )Atšķirībā no sešstūra kodiem, šīs vērtības nodrošina caurspīdīgumu (alfa), kas var būt ļoti noderīgs. Uzziniet vairāk par RGBa vai HSLa.
Demonstrācija
Vietnē CodePen skatiet CSS-Tricks pildspalvas fona krāsu (@ css-tricks).
Saistīts
- fona piestiprināšana
- fona klips
- fona attēls
- fona izcelsme
- background-position
- fona atkārtojums
- fona lielums
Vairāk resursu
- CSS3 spec
- MDN
Pārlūka atbalsts
Hex kodi un lielākā daļa krāsu nosaukumu darbojas visur. RGBa un HSLa ir savi pārlūka atbalsta komplekti: RGBa un HSLa.
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Darbi | Darbi | Darbi | Darbi | Darbi | Darbi | Darbi |