La propriété background-color dans CSS applique des couleurs unies comme arrière-plan sur un élément. Voici un exemple:
html ( background-color: #82a43a; )L'exemple utilisé ci-dessus ( #82a43a) est appelé un code hexadécimal, et c'est l'une des nombreuses façons dont CSS doit représenter une seule couleur. Il existe plusieurs façons de trouver les bons codes hexadécimaux. Quiconque a utilisé un outil de conception a vu un sélecteur de couleurs similaire à celui-ci:
Les codes hexadécimaux sont un moyen de déclarer une couleur en CSS. Il existe également tout un tas de noms que vous pouvez utiliser, par exemple:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Ces couleurs ne sont pas très flexibles, mais elles peuvent être utiles à la rigueur. Ils sont plus faciles à retenir que les codes hexadécimaux, et il y en a une tonne.
Une autre façon de déclarer une couleur consiste à utiliser RVB, RGBa, HSL ou HSLa:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )Contrairement aux codes hexadécimaux, ces valeurs permettent la transparence (alpha), ce qui peut être très utile. En savoir plus sur RGBa ou HSLa.
Démo
Voir la couleur d'arrière-plan du stylo par CSS-Tricks (@ css-tricks) sur CodePen.
En rapport
- background-attachment
- clip de fond
- image de fond
- background-origin
- position de fond
- Répétition du fond
- taille de fond
Plus de ressources
- Spécification CSS3
- MDN
Prise en charge du navigateur
Les codes hexadécimaux et la plupart des noms de couleurs fonctionnent partout. RGBa et HSLa ont leurs propres ensembles de support de navigateur: RGBa et HSLa.
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Travaux | Travaux | Travaux | Travaux | Travaux | Travaux | Travaux |