CSS più sfondi
In questo capitolo imparerai come aggiungere più immagini di sfondo a un elemento.
Imparerai anche le seguenti proprietà:
background-size
background-origin
background-clip
CSS più sfondi
CSS ti consente di aggiungere più immagini di sfondo per un elemento, tramite la
background-image
proprietà.
Le diverse immagini di sfondo sono separate da virgole e le immagini sono impilate l'una sull'altra, dove la prima immagine è più vicina allo spettatore.
L'esempio seguente ha due immagini di sfondo, la prima immagine è un fiore (allineato in basso e a destra) e la seconda immagine è uno sfondo di carta (allineato all'angolo in alto a sinistra):
Esempio
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
È possibile specificare più immagini di sfondo utilizzando le singole proprietà di sfondo (come sopra) o la background
proprietà abbreviata.
L'esempio seguente utilizza la background
proprietà shorthand (stesso risultato dell'esempio precedente):
Esempio
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
Dimensione sfondo CSS
La proprietà CSS background-size
consente di specificare la dimensione delle immagini di sfondo.
La dimensione può essere specificata in lunghezze, percentuali o utilizzando una delle due parole chiave: contenere o coprire.
L'esempio seguente ridimensiona un'immagine di sfondo molto più piccola dell'immagine originale (usando i pixel):
Ringrazialo per il dolore
Il dolore stesso è l'amore
Ecco perché è il minimo a venire, che la nostra pratica normale sopporta per trarne vantaggio
Ecco il codice:
Esempio
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Gli altri due possibili valori per background-size
sono contain
e cover
.
La contain
parola chiave ridimensiona l'immagine di sfondo in modo che sia il più grande possibile (ma sia la sua larghezza che la sua altezza devono rientrare nell'area del contenuto). Pertanto, a seconda delle proporzioni dell'immagine di sfondo e dell'area di posizionamento dello sfondo, potrebbero esserci alcune aree dello sfondo che non sono coperte dall'immagine di sfondo.
La cover
parola chiave ridimensiona l'immagine di sfondo in modo che l'area del contenuto sia completamente coperta dall'immagine di sfondo (sia la sua larghezza che l'altezza sono uguali o superiori all'area del contenuto). Pertanto, alcune parti dell'immagine di sfondo potrebbero non essere visibili nell'area di posizionamento dello sfondo.
L'esempio seguente illustra l'uso di contain
e cover
:
Esempio
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Definisci le dimensioni di più immagini di sfondo
La background-size
proprietà accetta anche più valori per la dimensione dello sfondo (usando un elenco separato da virgole), quando si lavora con più sfondi.
Nell'esempio seguente sono specificate tre immagini di sfondo, con un valore di dimensione dello sfondo diverso per ciascuna immagine:
Esempio
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Immagine di sfondo a grandezza naturale
Ora vogliamo avere un'immagine di sfondo su un sito Web che copra l'intera finestra del browser in ogni momento.
I requisiti sono i seguenti:
- Riempi l'intera pagina con l'immagine (senza spazi bianchi)
- Ridimensiona l'immagine secondo necessità
- Centra l'immagine nella pagina
- Non causare barre di scorrimento
L'esempio seguente mostra come farlo; Utilizzare l'elemento <html> (l'elemento <html> è sempre almeno l'altezza della finestra del browser). Quindi imposta uno sfondo fisso e centrato su di esso. Quindi regola le sue dimensioni con la proprietà background-size:
Esempio
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Immagine dell'eroe
Puoi anche utilizzare diverse proprietà di sfondo su un <div> per creare un'immagine eroe (un'immagine grande con testo) e posizionarla dove vuoi.
Esempio
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
Proprietà CSS di origine in background
La proprietà CSS background-origin
specifica dove è posizionata l'immagine di sfondo.
La proprietà assume tre diversi valori:
- border-box - l'immagine di sfondo inizia dall'angolo in alto a sinistra del bordo
- padding-box - (impostazione predefinita) l'immagine di sfondo inizia dall'angolo superiore sinistro del bordo del padding
- casella del contenuto - l'immagine di sfondo inizia dall'angolo in alto a sinistra del contenuto
L'esempio seguente illustra la background-origin
proprietà:
Esempio
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Proprietà CSS clip di sfondo
La proprietà CSS background-clip
specifica l'area di disegno dello sfondo.
La proprietà assume tre diversi valori:
- border-box - (impostazione predefinita) lo sfondo viene dipinto sul bordo esterno del bordo
- padding-box - lo sfondo è dipinto sul bordo esterno dell'imbottitura
- casella del contenuto - lo sfondo è dipinto all'interno della casella del contenuto
L'esempio seguente illustra la background-clip
proprietà:
Esempio
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Proprietà di sfondo avanzate CSS
Property | Description |
---|---|
background | A shorthand property for setting all the background properties in one declaration |
background-clip | Specifies the painting area of the background |
background-image | Specifies one or more background images for an element |
background-origin | Specifies where the background image(s) is/are positioned |
background-size | Specifies the size of the background image(s) |