Sfondo CSS

Le proprietà di sfondo CSS vengono utilizzate per definire l'effetto di sfondo dell'elemento.

In questi capitoli, imparerai le seguenti proprietà di sfondo CSS:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

CSS background-color

background-color L'attributo specifica il colore di sfondo dell'elemento.

Esempio

L'impostazione del colore di sfondo della pagina è la seguente:

body {
  background-color: celeste;
}

Prova personalmente

Attraverso CSS, il colore è generalmente specificato nei seguenti modi:

  • Nome del colore valido - ad esempio "red"
  • Valori esadecimali - ad esempio "#ff0000"
  • Valori RGB - ad esempio "rgb(255,0,0)"

Vedere Valori di colore CSS，ottenere l'elenco completo dei valori di colore possibile.

Altri elementi

Puoi impostare il colore di sfondo per qualsiasi elemento HTML:

Esempio

In questo esempio, gli elementi <h1>, <p> e <div> avranno colori di sfondo diversi:

h1 {
  background-color: verde;
}
div {
  background-color: celeste;
}
p {
  background-color: giallo;
}

Prova personalmente

Opacità / Trasparenza

L'attributo opacità specifica l'opacità/trasparenza dell'elemento. Il valore è compreso tra 0.0 e 1.0. Più basso è il valore, maggiore è la trasparenza:

opacità 1
opacità 0.6
opacità 0.3
opacità 0.1

Esempio

div {
  background-color: verde;
  opacità: 0.3;
}

Prova personalmente

Attenzione:Utilizzare opacità Quando si aggiunge l'opacità all'elemento di sfondo utilizzando l'attributo, tutti i figli dell'elemento ereditano la stessa opacità. Questo potrebbe rendere difficile leggere il testo all'interno di elementi completamente trasparenti.

Opacità RGBA

Se non si desidera applicare l'opacità ai figli, ad esempio nell'esempio sopra, utilizzare: RGBA Valore del colore. Esempio di seguito: impostazione del colore di sfondo invece dell'opacità del testo:

100% opacità
60% opacità
opacità del 30%
opacità del 10%

Hai trovato ulteriori informazioni sui colori RGBA nel nostro Colori CSS In questa sezione hai imparato come utilizzare l'RGB come valore di colore. Oltre all'RGB, è possibile utilizzare il valore di colore RGB con alfa I canali vengono utilizzati insieme (RGBA) - Il canale specifica l'opacità del colore.

Il valore di colore RGBA è specificato come: rgba(red, green, blue, alfa)。alfa I parametri sono numeri che vanno da 0.0 (completamente trasparente) a 1.0 (completamente opaco).

Suggerimento:Puoi trovare ulteriori informazioni sui colori RGBA nella nostra Colori CSS In questa sezione hai imparato di più sui colori RGBA.

Esempio

div {
  background: rgba(0, 128, 0, 0.3) /* Sfondo verde con opacità del 30% */
}

Prova personalmente