La proprietà background-color in CSS applica i colori a tinta unita come sfondo su un elemento. Ecco un esempio:
html ( background-color: #82a43a; )L'esempio usato sopra ( #82a43a) è chiamato codice esadecimale ed è uno dei diversi modi in cui i CSS devono rappresentare un singolo colore. Esistono diversi modi per trovare i codici esadecimali corretti. Chiunque abbia utilizzato uno strumento di progettazione ha visto un selettore di colori simile a questo:
I codici esadecimali sono un modo per dichiarare un colore in CSS. Ci sono anche un sacco di nomi che puoi usare, ad esempio:
.page-wrap ( background: white; ) footer ( background: black; ) .almonds ( background: blanchedAlmond; )Questi colori non sono molto flessibili, ma possono tornare utili in caso di necessità. Sono più facili da ricordare dei codici esadecimali e ce ne sono un sacco.
Un altro modo per dichiarare un colore è usare RGB, RGBa, HSL o HSLa:
#page-wrap ( background: rgba(0, 0, 0, 0.8); /* 80% Black */ ) .widget ( background: hsla(170, 50%, 45%, 1); )A differenza dei codici esadecimali, questi valori consentono la trasparenza (alfa), che può essere molto utile. Ulteriori informazioni su RGBa o HSLa.
Demo
Vedi il colore di sfondo della penna di CSS-Tricks (@ css-tricks) su CodePen.
Relazionato
- sfondo-allegato
- clip di sfondo
- immagine di sfondo
- background-origin
- background-position
- ripetizione in background
- dimensione dello sfondo
Più risorse
- Specifiche CSS3
- MDN
Supporto browser
I codici esadecimali e la maggior parte dei nomi dei colori funzionano ovunque. RGBa e HSLa hanno i propri set di supporto del browser: RGBa e HSLa.
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lavori | Lavori | Lavori | Lavori | Lavori | Lavori | Lavori |