CSS Colore di sfondo

Esempio

La proprietà background-color imposta il colore di sfondo di un elemento usando un valore di colore o tramite parole chiave, come transparent , inherit o initial .

  • trasparente , specifica che il colore di sfondo deve essere trasparente. Questo è il valore predefinito.

  • eredita , eredita questa proprietà dal suo elemento genitore.

  • iniziale , imposta questa proprietà sul valore predefinito.

Questo può essere applicato a tutti gli elementi e agli pseudo-elementi ::first-letter / ::first-line .

I colori in CSS possono essere specificati con metodi diversi .


Nomi di colori

CSS

div {
  background-color: red;  /* red */
} 

HTML

<div>This will have a red background</div>
  • L'esempio sopra riportato è uno dei molti modi in cui il CSS deve rappresentare un singolo colore.

Codici colore esadecimali

Il codice esadecimale viene utilizzato per indicare le componenti RGB di un colore in notazione esadecimale in base 16. # ff0000, ad esempio, è rosso acceso, dove il componente rosso del colore è 256 bit (ff) e le corrispondenti parti verde e blu del colore sono 0 (00).

Se entrambi i valori in ciascuno dei tre accoppiamenti RGB (R, G e B) sono gli stessi, il codice colore può essere abbreviato in tre caratteri (la prima cifra di ciascun accoppiamento). #ff0000 può essere abbreviato in #f00 e #ffffff può essere abbreviato in #fff .

La notazione esadecimale non fa distinzione tra maiuscole e minuscole.

body {
  background-color: #de1205; /* red */
}

.main {
  background-color: #00f; /* blue */
}

RGB / RGBa

Un altro modo per dichiarare un colore è usare RGB o RGBa.

RGB sta per Rosso, Verde e Blu e richiede tre valori separati tra 0 e 255, tra parentesi, che corrispondono ai valori dei colori decimali rispettivamente per rosso, verde e blu.

RGBa consente di aggiungere un ulteriore parametro alfa tra 0.0 e 1.0 per definire l'opacità.

header {
  background-color: rgb(0, 0, 0); /* black */
}

footer {
  background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */
}

HSL / HSLa

Un altro modo per dichiarare un colore è usare HSL o HSLa ed è simile a RGB e RGBa.

HSL è sinonimo di tonalità, saturazione e luminosità, ed è spesso chiamato anche HLS:

  • La tonalità è un grado sulla ruota dei colori (da 0 a 360).
  • La saturazione è una percentuale compresa tra 0% e 100%.
  • La luminosità è anche una percentuale compresa tra 0% e 100%.

HSLa consente di aggiungere un ulteriore parametro alfa tra 0.0 e 1.0 per definire l'opacità.

li a {
  background-color: hsl(120, 100%, 50%); /* green */
}

#p1 {
  background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */
}

Interazione con l'immagine di sfondo

Le seguenti affermazioni sono tutte equivalenti:

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

Porteranno tutti al colore rosso che viene mostrato sotto l'immagine, dove le parti dell'immagine sono trasparenti, o l'immagine non viene visualizzata (forse come risultato della background-repeat dello background-repeat ).

Si noti che quanto segue non è equivalente:

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

Qui, il valore dello background sovrascrive l' background-image .

Per maggiori informazioni sulla proprietà dello background , vedere Stenografia background sfondo