Fono spalva - CSS-gudrybės

Turinys

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šų į šį:

Atkreipkite dėmesį į šešiakampį kodą apatiniame viduryje.

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

Įdomios straipsniai...