CSS3 Backgrounds
CSS3 contiene alcune nuove proprietà dello sfondo, che permettono un maggiore controllo del elemento di sfondo.
In questo capitolo imparerete come aggiungere più immagini di sfondo di un elemento.
Potrai anche conoscere le seguenti nuove proprietà CSS3:
-
background-size -
background-origin -
background-clip
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
Numeri seguiti da -webkit-, -moz- , o -o- specificare la prima versione che ha lavorato con un prefisso.
| Proprietà | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 sfondi multipli
CSS3 permette di aggiungere più immagini di sfondo per un elemento, attraverso il background-image proprietà.
Le diverse immagini di sfondo sono separati da virgole, e le immagini sono impilati uno sopra l'altro, in cui la prima immagine è più vicino allo spettatore.
Il seguente esempio ha due immagini di sfondo, la prima immagine è un fiore (allineato al fondo e destra) e la seconda immagine è una carta di fondo (allineato all'angolo superiore sinistro):
Esempio
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} Prova tu stesso " Più immagini di sfondo possono essere specificati utilizzando i singoli proprietà dello sfondo (come sopra) o il background proprietà abbreviata.
L'esempio seguente utilizza la background proprietà abbreviata (stesso risultato dell'esempio precedente):
Esempio
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} Prova tu stesso " CSS3 Sfondo Size
Il CSS3 background-size proprietà consente di specificare la dimensione delle immagini di sfondo.
Prima CSS3, la dimensione di immagine di sfondo era la dimensione effettiva dell'immagine. CSS3 ci permette di riutilizzare immagini di sfondo in diversi contesti.
La dimensione può essere specificata in lunghezze, percentuali, o utilizzando uno dei due parole chiave: contengono o il coperchio.
L'esempio seguente ridimensiona un'immagine di sfondo per molto più piccoli rispetto all'immagine originale (utilizzando pixel):
immagine di sfondo originale:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
immagine di sfondo ridimensionata:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Ecco il codice:
Esempio
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Prova tu stesso " Gli altri due possibili valori per background-size sono contain e cover .
Il contain parola chiave scala l'immagine di sfondo di essere il più grande possibile (ma sia la sua larghezza e la sua altezza deve adattarsi all'interno dell'area di contenuto). Come tale, a seconda delle proporzioni dell'immagine di sfondo e la zona di posizionamento sfondo, ci possono essere alcune aree dello sfondo che non sono coperti dalla immagine di sfondo.
La cover parola chiave scala l'immagine di sfondo in modo che l'area del contenuto è completamente coperto da l'immagine di sfondo (sia la sua larghezza e altezza sono uguali o superano l'area del contenuto). Come tale, alcune parti dell'immagine di sfondo possono non essere visibile sullo sfondo zona di posizionamento.
L'esempio seguente illustra l'uso di contain e di 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;
}
Prova tu stesso " Definire le dimensioni delle immagini multiple di sfondo
Il background-size proprietà accetta anche più valori per la dimensione di fondo (utilizzando un elenco separato da virgole), quando si lavora con più sfondi.
Il seguente esempio ha tre immagini di sfondo specificato, con diversi background-size valore per ogni immagine:
Esempio
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} Prova tu stesso " Full Size immagine di sfondo
Ora vogliamo avere un'immagine di sfondo su un sito web che copre l'intera finestra del browser in ogni momento.
I requisiti sono i seguenti:
- Riempire l'intera pagina con l'immagine (senza spazi bianchi)
- Scala l'immagine in base alle esigenze
- immagine Centro a pagina
- Non causare barre di scorrimento
L'esempio seguente mostra come farlo; Utilizzare l'elemento html (l'elemento html è sempre almeno all'altezza della finestra del browser). Quindi impostare un fondo fisso e centrato su di essa. Quindi regolare la sua dimensione con il background-size proprietà:
Esempio
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
} Prova tu stesso " CSS3 background-origin Proprietà
Il CSS3 background-origin proprietà specifica in cui l'immagine di sfondo è posizionata.
La struttura prende tre diversi valori:
- border-box - l'immagine di sfondo inizia dall'angolo in alto a sinistra del bordo
- padding-box - (default) l'immagine di sfondo inizia dall'angolo in alto a sinistra del limite del cuscinetto
- content-box - l'immagine di sfondo inizia dall'angolo in alto a sinistra del contenuto
L'esempio seguente illustra il background-origin di proprietà:
Esempio
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Prova tu stesso " CSS3 background-clip proprietà
Il CSS3 background-clip proprietà specifica zona di verniciatura dello sfondo.
La struttura prende tre diversi valori:
- border-box - (default) lo sfondo è dipinto al bordo esterno del bordo
- padding-box - lo sfondo è dipinto al bordo esterno dell'imbottitura
- content-box - lo sfondo è dipinto all'interno della casella di contenuti
L'esempio seguente illustra il background-clip proprietà:
Esempio
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Prova tu stesso " Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4» Esercizio 5 »
Proprietà CSS3 sfondo
| Proprietà | Descrizione |
|---|---|
| background | Una proprietà scorciatoia per settare tutte le proprietà di fondo in una dichiarazione |
| background-clip | Specifica la zona di verniciatura dello sfondo |
| background-image | Specifica una o più immagini di sfondo per un elemento |
| background-origin | Specifica dove l'immagine di sfondo (s) è / sono posizionati |
| background-size | Specifica la dimensione dell'immagine di sfondo (s) |