HTML and CSS Reference
In-Depth Information
Esempio 6.6
div
{
width: 500pt;
height: 250pt;
border: 1px solid #000;
background-color: #aaa;
background: #ddd;
background-image: linear-gradient(left, #999, #eee);
}
Il risultato del codice
nell'esempio 6.6
è visibile nella
figura 6.3
.
Figura 6.3
- Contenitore con riempimento dello sfondo sfumato.
Oltre a un riempimento sfumato come quello mostrato nella
figura 6.3
, attraverso la
proprietà
background-image
è possibile impostare un'immagine come sfondo
dell'elemento. Possiamo controllare la posizione (verticale e orizzontale, rispetto
all'angolo superiore sinistro dell'elemento) in cui verrà visualizzata l'immagine con la pro-
prietà
background-position
e se dovrà essere replicata come texture in orizzontale
e/o in verticale con
background-repeat
.
Le specifiche CSS supportano background multipli, cioè la possibilità di specificare
più di un'immagine di sfondo posizionando ciascuna risorsa su un livello diverso (layer).
L'esempio 6.7
presenta un esempio di background multipli per la costruzione di una scena
complessa, usando singole immagini (un aeroplano, una nuvola e un sole) opportunamente
posizionate come sfondo di un contenitore.
Esempio 6.7
div
{
