Bakgrundsfärg - CSS-tricks

Anonim

Egenskapen bakgrundsfärg i CSS tillämpar solida färger som bakgrund på ett element. Här är ett exempel:

html ( background-color: #82a43a; )

Exemplet som används ovan ( #82a43a) kallas en hex-kod och det är ett av flera sätt som CSS måste representera en enda färg. Det finns ett antal sätt att hitta rätt hex-koder. Alla som har använt ett designverktyg har sett en färgväljare som liknar den här:

Notera hexkoden i den nedre mitten.

Hexkoder är ett sätt att deklarera en färg i CSS. Det finns också en hel massa namn som du kan använda, till exempel:

.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )

Dessa färger är inte särskilt flexibla, men de kan komma till nytta i en nypa. De är lättare att komma ihåg än hexkoder, och det finns massor av dem.

Ett annat sätt att deklarera en färg är att använda RGB, RGBa, HSL eller HSLa:

#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )

Till skillnad från hexkoder tillåter dessa värden transparens (alfa), vilket kan vara mycket användbart. Läs mer om RGBa eller HSLa.

Demo

Se bakgrundsfärgen för pennan från CSS-Tricks (@ css-tricks) på CodePen.

Relaterad

  • bakgrundsbilaga
  • bakgrund-klipp
  • bakgrundsbild
  • bakgrund-ursprung
  • bakgrundsposition
  • bakgrund-upprepa
  • bakgrundsstorlek

Fler resurser

  • CSS3 specifikation
  • MDN

Webbläsarstöd

Hexkoder och de flesta färgnamn fungerar överallt. RGBa och HSLa har sina egna uppsättningar av webbläsarstöd: RGBa och HSLa.

Krom Safari Firefox Opera IE Android iOS
Arbetar Arbetar Arbetar Arbetar Arbetar Arbetar Arbetar