CSS ypatybė fono spalva taiko vientisąsias spalvas kaip elemento foną. Štai pavyzdys:
html ( background-color: #82a43a; )Aukščiau naudojamas pavyzdys ( #82a43a) vadinamas šešiakampiu kodu, ir tai yra vienas iš kelių būdų, kuriais CSS turi atvaizduoti vieną spalvą. Yra keli būdai, kaip rasti tinkamus šešioliktainius kodus. Kiekvienas, kuris naudojo dizaino įrankį, matė spalvų rinkiklį, panašų į šį:
Hex kodai yra vienas iš būdų deklaruoti spalvą CSS. Taip pat yra daugybė vardų, kuriuos galite naudoti, pavyzdžiui:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Šios spalvos nėra labai lanksčios, tačiau gali praversti šiek tiek. Jie lengviau įsimenami nei šešioliktainiai kodai, ir jų yra daugybė.
Kitas būdas deklaruoti spalvą yra naudoti RGB, RGBa, HSL arba HSLa:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )Skirtingai nuo šešioliktainių kodų, šios vertės suteikia skaidrumą (alfa), o tai gali būti labai naudinga. Sužinokite daugiau apie RGBa arba HSLa.
Demonstracija
„CodePen“ žiūrėkite „CSS-Tricks“ (@ css-tricks) rašiklio fono spalvą.
Susijęs
- prisirišimas prie fono
- fono klipas
- fonas-vaizdas
- fono kilmė
- fonas-padėtis
- fonas pakartoti
- fono dydis
Daugiau išteklių
- CSS3 spec
- MDN
Naršyklės palaikymas
Hex kodai ir dauguma spalvų pavadinimų veikia visur. RGBa ir HSLa turi savo naršyklės palaikymo rinkinius: RGBa ir HSLa.
| „Chrome“ | „Safari“ | „Firefox“ | Opera | T.Y | „Android“ | „iOS“ |
|---|---|---|---|---|---|---|
| Veikia | Veikia | Veikia | Veikia | Veikia | Veikia | Veikia |