De eigenschap background-color in CSS past effen kleuren toe als achtergrond op een element. Hier is een voorbeeld:
html ( background-color: #82a43a; )Het bovenstaande voorbeeld ( #82a43a) wordt een hexadecimale code genoemd en het is een van de vele manieren waarop CSS een enkele kleur moet vertegenwoordigen. Er zijn een aantal manieren om de juiste hex-codes te vinden. Iedereen die een ontwerptool heeft gebruikt, heeft een kleurenkiezer gezien die lijkt op deze:
Hex-codes zijn een manier om een kleur in CSS te declareren. Er zijn ook een heleboel namen die u kunt gebruiken, bijvoorbeeld:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Deze kleuren zijn niet erg flexibel, maar ze kunnen in een mum van tijd van pas komen. Ze zijn gemakkelijker te onthouden dan hex-codes, en er zijn er een heleboel.
Een andere manier om een kleur te declareren, is door RGB, RGBa, HSL of HSLa te gebruiken:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )In tegenstelling tot hex-codes zorgen deze waarden voor transparantie (alfa), wat super handig kan zijn. Lees meer over RGBa of HSLa.
Demo
Zie de achtergrondkleur van de pen door CSS-Tricks (@ css-tricks) op CodePen.
Verwant
- achtergrond-bijlage
- achtergrond-clip
- achtergrond afbeelding
- achtergrond-oorsprong
- achtergrond-positie
- achtergrond herhaling
- achtergrondgrootte
Meer middelen
- CSS3-specificatie
- MDN
Browser-ondersteuning
Hex-codes en de meeste kleurnamen werken overal. RGBa en HSLa hebben hun eigen browserondersteuning: RGBa en HSLa.
| Chrome | Safari | Firefox | Opera | D.W.Z | Android | iOS |
|---|---|---|---|---|---|---|
| Werken | Werken | Werken | Werken | Werken | Werken | Werken |