CSS background-color
La proprietà CSS background-color imposta il colore di sfondo di un elemento
La proprietà background-color consente di definire il colore di sfondo di un elemento. È una delle proprietà di base in CSS e può essere utilizzata per migliorare l'aspetto visivo di qualsiasi elemento, come div, sezioni o persino il corpo della pagina. Può essere impostata con valori di colore predefiniti (come red o blue), codici esadecimali (#ff0000), valori RGB (rgb(255, 0, 0)) o HSL (hsl(0, 100%, 50%)), oltre a varianti trasparenti come rgba.
Sintassi
Significato dei valori principali:
-
color: un valore di colore predefinito, come
red,blue,green, ecc. -
hex: un valore di colore esadecimale, come
#ff0000per il rosso. -
rgb: un valore RGB, che definisce il colore tramite i valori di rosso, verde e blu, ad esempio
rgb(255, 0, 0)per il rosso. -
rgba: una variante di RGB che include un valore di trasparenza (alpha), ad esempio
rgba(255, 0, 0, 0.5)per un rosso semitrasparente. -
hsl: un valore di colore in modalità Hue, Saturation, Lightness, come
hsl(0, 100%, 50%)per il rosso.
Esempio proprietà: background-color
Codice Esempio: background-color
.background-color-example {
background-color: #3498db;
padding: 50px;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
Contenuto Esempio: background-color
Esempio di utilizzo di background-color
In questo esempio, il colore di sfondo viene impostato su background-color: #3498db (un blu) per l'elemento:
CSS e HTML per l'elemento con sfondo colorato:
<style>
.background-color-example {
background-color: #3498db;
padding: 50px;
color: white;
font-size: 22px;
text-align: center;
border-radius: 10px;
}
</style>
<div class="background-color-example">
Sfondo di colore blu
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.214
