Sono Andrea Tonin di Rovigo, mi occupo per professione di programmazione CSS e HTML. Ho una grande passione per la grafica e per i siti internet visuali ed interattivi! Spero che questo corso pratico di CSS vi possa essere utile
In CSS3 è possibile utilizzare degli sfondi multipli, vediamo come.
Attenzione! Gli sfondi multipli non sono supportati da Internet Explorer versione 8 e precedenti, pertanto si ricorre ad una dichiarazione di sicurezza per i browser meno recenti.
Prima di tutto abbiamo a disposizione 3 immagini:
IMMAGINE1
IMMAGINE2
IMMAGINE3
Vediamo il seguente codice:
<!DOCTYPE html> <html> <head> <title>Titolo del documento</title> <style type="text/css"> #esempio1 { /* la dimensione del box sarà quella di IMMAGINE3 */ width: 500px; height: 281px; border: 5px solid #333; /* dichiarazione di sicurezza per i vecchi browser, viene saltata dai nuovi browser */ background: #ffffff url(http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/lulu_cielo.png) top left; /* carico in ordine IMMAGINE 1 2 3 */ background-image: url(http://www.lucedigitale.com/blog/wp-content/uploads/2013/06/lulu.png), url(http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/lulu_sole.png), url(http://www.lucedigitale.com/blog/wp-content/uploads/2013/07/lulu_cielo.png); /* posiziono in ordine IMMAGINE 1 2 3 */ background-position: bottom right, top left,top left; /* ripeto in ordine IMMAGINE 1 2 3 */ background-repeat: no-repeat, no-repeat, no-repeat; background-color: white; } </style> </head> <body> <div id="esempio1"> </div> </body> </html>
Vediamo il risultato finale qui sotto: