Háttérszín - CSS-trükkök

Anonim

A CSS háttérszín tulajdonsága egyszínű háttérként alkalmazza az elemet. Íme egy példa:

html ( background-color: #82a43a; )

A fenti ( #82a43a) példát hexakódnak hívják, és ez az egyik módja annak, hogy a CSS-nek egyetlen színt kell képviselnie. Számosféleképpen lehet megtalálni a megfelelő hex kódokat. Aki már használt tervezőeszközt, látott ehhez hasonló színválasztót:

Vegye figyelembe az alsó középső hatszög kódot.

A hex kódok az egyik módja annak, hogy a színt CSS-ben deklaráljuk. Van egy csomó név is, amelyeket használhat, például:

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

Ezek a színek nem túl rugalmasak, de egy csipetnyi esetben jól jöhetnek. Könnyebben megjegyezhetők, mint a hexakódok, és rengeteg van belőlük.

A szín deklarálásának másik módja az RGB, RGBa, HSL vagy HSLa használata:

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

A hex kódokkal ellentétben ezek az értékek lehetővé teszik az átlátszóságot (alfa), ami szuper hasznos lehet. Tudjon meg többet az RGBa-ról vagy a HSLa-ról.

Demó

Lásd a CSS-Tricks toll háttérszínét (@ css-tricks) a CodePen-en.

Összefüggő

  • háttér-kötődés
  • háttér-klip
  • háttérkép
  • háttér-eredet
  • háttér-helyzet
  • háttérismétlés
  • háttérméret

További források

  • CSS3 specifikáció
  • MDN

Böngésző támogatás

Hex kódok és a legtöbb színnév mindenhol működik. Az RGBa és a HSLa saját böngészőtámogatással rendelkezik: RGBa és HSLa.

Króm Szafari Firefox Opera AZAZ Android iOS
Művek Művek Művek Művek Művek Művek Művek