La proprietà background-color nei CSS serve a gestire lo sfondo di una pagina web o anche di un elemento.
Background-color
Questa proprietà consente di impostare un colore di sfondo attraverso vari modi.
Si possono infatti indicare i colori tramite:
-un valore esadecimale;
-un valore RGB o RGBa;
-il nome di un colore valido.
Background-color CSS esempi
Valore espresso tramite un nome valido
Alcuni esempi di nomi validi sono dunque: red, yellow, blue, lightblue, green, brown, coral.
Facciamo adesso degli esempi pratici di questa proprietà.
Impostiamo quindi lo sfondo di una pagina web color corallo, attraverso questo semplice codice CSS:
body{
background-color: coral;
}Impostiamo adesso il colore dello sfondo di un paragrafo:
p{
background-color: blue;
}Valore espresso tramite un valore esadecimale
Il background-color si specifica con la notazione esadecimale caratterizzata dal simbolo del cancelletto # e seguita da un codice di 6 caratteri che corrisponde ad un colore. In particolare le prime due cifre riguardano le coordinate del rosso e vanno da un minimo di 00 ad un massimo di ff, le altre due cifre riguardano il colore verde, mentre le altre due cifre riguardano il colore blu.
Quindi ad esempio il colore: #ff0000 rappresenta il rosso puro in quanto ha le prime due cifre sono uguali al valore massimo del rosso (ff) e le altre a 0.
Allo stesso modo otteniamo il blu puro: #0000ff ed il verde puro: #00ff00.
Facciamo dunque degli esempi usando la notazione esadecimale, come nell’esempio sotto dove impostiamo uno sfondo rosso per tutti i livelli:
div{
background-color: #ff0000;
}Oppure, ad esempio, utilizziamo uno sfondo blu per l’elemento h1:
h1{
background-color: #0000ff;
}Valore espresso tramite un valore RGB
Un colore RGB si specifica utilizzando la funzione rgb() dove tra parentesi si indicano le coordinate del colore da utilizzare. I valori seguono questo ordine rgb(rosso, verde, blu). Per ogni colore si possono indicare 2^8=256 possibili combinazioni, dunque i valori che vanno da 0 a 255.
Alcuni esempi sono rosso puro: rgb(255,0,0) cioè il massimo per il valore rosso e 0 per il verde ed il blu.
Verde puro: rgb(0,255,0) cioè questa volta abbiamo il rosso a 0, il verde assume il valore massimo (255) mentre il blu è 0.
E così via.
Impostiamo quindi il background-color a verde per il titolo h2, specificando le coordinate RGB:
h2{
background-color: rgb(0,255,0);
}O ancora impostiamo un colore di sfondo giallo per una classe personalizzata di nome sf-giallo:
.sf-giallo{
background-color: rgb(255,255,0);
}In alternativa si possono utilizzare anche i valori in percentuale, ma è una notazione meno frequente.
Valore espresso tramite un valore RGBa
I valori RGBa sono un’estensione degli RGB con l’aggiunta del canale alpha. Quest’ultimo canale specifica l’opacità.
La funzione che si utilizza è rgba() dove tra parentesi tonde si inseriscono questi valori: rgba(rosso, verde, blu, alpha).
I valori di alpha vanno da 0.0 a 1. Dove con 0 indichiamo la completa trasparenza e quindi il colore non si vede mentre con 1 indichiamo il colore completamente opaco e quindi equivale a non mettere nulla.
Impostiamo quindi il background-color di colore giallo con livello di opacità a 0.5:
body{
background-color: rgb(255,255,0,1);
}Alcuni link utili
Fogli di stile interni, esterni ed in linea
Come impostare le pseudo-classi