Proprietà CSS background-color

La proprietà CSS background-color imposta il colore di sfondo di un elemento. Il colore riempie il contenuto, il padding e i bordi dell'elemento, ma non il margine — i margini sono sempre trasparenti e lasciano trasparire lo sfondo del genitore.

Questa pagina tratta la sintassi della proprietà, i formati di colore disponibili, le parole chiave speciali transparent e initial, come il colore si anima tra gli stati e la regola di accessibilità che garantisce la leggibilità del testo.

Come impostare un colore di sfondo

Puoi passare qualsiasi valore di colore CSS valido. I formati più comuni sono:

Colori con nome — red, tomato, rebeccapurple.
HEX — #ff0000 (o la forma abbreviata a 3 cifre #f00), con una coppia alpha opzionale #ff000080.
rgb() / rgba() — rgb(255, 0, 0), rgba(255, 0, 0, 0.5) per la trasparenza parziale.
hsl() / hsla() — hsl(0, 100%, 50%), spesso più facile da regolare manualmente rispetto all'HEX.

Puoi scegliere i valori visivamente con il nostro strumento Color Picker, oppure consultare il riferimento completo dei Colori HTML.

background-color è la parte più semplice della sintassi abbreviata background; se hai bisogno solo di un colore solido, impostalo da solo anziché scrivere l'intera sintassi abbreviata.

Attenzione

Mantieni sempre un rapporto di contrasto sufficientemente elevato tra il colore di sfondo e il testo sovrapposto. WCAG richiede almeno 4,5:1 per il testo normale (3:1 per il testo grande), in modo che le persone con problemi di vista possano leggere la pagina. Usa un verificatore di contrasto quando scegli combinazioni scuro-su-chiaro o chiaro-su-scuro.

Valore iniziale	transparent
Si applica a	Tutti gli elementi. Si applica anche a ::first-letter e ::first-line.
Ereditato	No.
Animabile	Sì. Il colore dello sfondo è animabile.
Versione	CSS1
Sintassi DOM	object.style.backgroundColor = "#FFFFFF";

Sintassi

Sintassi della proprietà CSS background-color

background-color: color | transparent | initial | inherit;

Esempio della proprietà background-color:

Esempio della proprietà CSS background-color

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: #8ebc42;
      }
    </style>
  </head>
  <body>
    <h2>Background-color Property Example</h2>
    <p>Here the background-color is specified with a hex value.</p>
  </body>
</html>

Provalo tu stesso »

![Proprietà CSS background-color](https://api.w3docs.com/uploads/media/default/0001/03/0e320aa63c591a91d882bbc24e53bcfcffa18142.png "CSS background-color property" =420x)

Utilizzo della trasparenza

Qualsiasi formato di colore con canale alpha permette al colore di essere semi-trasparente rispetto a ciò che si trova dietro l'elemento:

background-color: rgba(255, 0, 0, 0.5);     /* semi-transparent red */
background-color: hsla(120, 100%, 50%, 0.5); /* semi-transparent green */
background-color: #0000ff80;                  /* semi-transparent blue (8-digit hex) */

Il quarto valore (alpha) va da 0 (completamente trasparente) a 1 (completamente opaco). A differenza della proprietà opacity, un colore di sfondo con alpha influisce solo sullo sfondo — il testo e gli elementi figli rimangono completamente opachi.

Esempio della proprietà background-color con il valore "transparent":

Esempio della proprietà CSS background-color con valore transparent

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: transparent;
      }
    </style>
  </head>
  <body>
    <h2>Background-color Property Example</h2>
    <p>In this example the background-color is set to transparent. This is the default value.</p>
  </body>
</html>

Provalo tu stesso »

Esempio della versione animata della proprietà background-color:

Esempio della proprietà CSS background-color con animazione

<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background-color: #eee;
        animation: mymove 5s infinite;
      }
      @keyframes mymove {
        30% {
          background-color: #1c87c9;
        }
        100% {
          background-color: #eee;
        }
      }
    </style>
  </head>
  <body>
    <h2> Animation of background-color property</h2>
    <p>
      In this example it gradually changes the background color from grey to blue, and back to grey.
    </p>
  </body>
</html>

Provalo tu stesso »

Poiché background-color è animabile, il browser interpola fluidamente tra i due colori. Funziona allo stesso modo con le transizioni CSS — ad esempio, sfumando lo sfondo di un pulsante al passaggio del mouse (:hover).

Ereditarietà

background-color non viene ereditata. Ogni elemento inizia con il valore transparent, quindi un elemento figlio non copia lo sfondo del genitore — lascia semplicemente trasparire lo sfondo del genitore a meno che non gli venga assegnato un valore proprio. Ecco perché impostare un colore su <body> sembra "riempire la pagina": gli elementi figli sono trasparenti e il colore del body traspare dietro di essi.

Supporto dei browser

background-color fa parte della specifica fin dai tempi di CSS1 ed è supportata in tutti i browser, incluse tutte le versioni di Internet Explorer. La notazione HEX con alpha a 4 e 8 cifre (#rrggbbaa) è l'unica aggiunta più recente e richiede un browser ragionevolmente moderno; rgba() e hsla() sono sicure ovunque.

Valori

Valore	Descrizione	Provalo
transparent	Questo è il valore predefinito e definisce il colore di sfondo come trasparente. Significa che non è presente alcun colore di sfondo.	Provalo »
color	Definisce il colore di sfondo. È possibile usare nomi di colori, codici colore esadecimali, rgb(), rgba(), hsl(), hsla().	Provalo »
initial	Imposta la proprietà al suo valore predefinito.	Provalo »
inherit	Eredita la proprietà dall'elemento genitore.

Esercitati

Pratica

Qual è lo scopo della proprietà 'background-color' in CSS?

Cambiare il colore di sfondo di un elementoCambiare il colore del testo di un elementoApplicare un'immagine di sfondo a un elementoRimuovere il colore di sfondo di un elementoCreare un colore di sfondo traslucido