Sfondi CSS
Le proprietà di sfondo CSS vengono utilizzate per aggiungere effetti di sfondo per gli elementi.
In questi capitoli imparerai le seguenti proprietà di sfondo CSS:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(proprietà abbreviata)
Colore di sfondo CSS
La background-colorproprietà specifica il colore di sfondo di un elemento.
Esempio
Il colore di sfondo di una pagina è impostato in questo modo:
body {
background-color: lightblue;
}
Con CSS, un colore è spesso specificato da:
- un nome di colore valido, come "rosso"
- un valore esadecimale, come "#ff0000"
- un valore RGB, come "rgb(255,0,0)"
Guarda i valori dei colori CSS per un elenco completo dei possibili valori dei colori.
Altri elementi
Puoi impostare il colore di sfondo per qualsiasi elemento HTML:
Esempio
Qui, gli elementi <h1>, <p> e <div> avranno diversi colori di sfondo:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
Opacità/Trasparenza
La opacityproprietà specifica l'opacità/trasparenza di un elemento. Può assumere un valore compreso tra 0,0 e 1,0. Più basso è il valore, più trasparente:
opacità 1
opacità 0,6
opacità 0,3
opacità 0,1
Esempio
div {
background-color: green;
opacity: 0.3;
}
Nota: quando si utilizza la opacityproprietà per aggiungere trasparenza allo sfondo di un elemento, tutti i suoi elementi figlio ereditano la stessa trasparenza. Ciò può rendere difficile la lettura del testo all'interno di un elemento completamente trasparente.
Trasparenza con RGBA
Se non vuoi applicare l'opacità agli elementi figlio, come nel nostro esempio sopra, usa i valori di colore RGBA . L'esempio seguente imposta l'opacità per il colore di sfondo e non per il testo:
100% di opacità
60% di opacità
30% di opacità
10% di opacità
Hai imparato dal nostro capitolo sui colori CSS che puoi usare RGB come valore di colore. Oltre a RGB, puoi utilizzare un valore di colore RGB con un canale alfa (RGB A ) - che specifica l'opacità per un colore.
Un valore di colore RGBA è specificato con: rgba(red, green, blue, alpha ). Il parametro alfa è un numero compreso tra 0,0 (completamente trasparente) e 1,0 (completamente opaco).
Suggerimento: imparerai di più sui colori RGBA nel nostro capitolo sui colori CSS .
Esempio
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}