Aggiunta di una sovrapposizione di foto galleggiante al tuo sito Web non deve trasformarsi in un pomeriggio di codifica. Sovrapposizioni, spesso visti in effetti scatola luminosa che coprono un'intera schermata, possono comparire ovunque su una pagina Web. Alcuni proprietari di sito potrebbero posizionarle nella parte superiore e li usa come logos. Gli altri possono sovrapporre le immagini lungo il bordo della pagina. Se la pagina Web ha bisogno di una sovrapposizione di foto in fondo alla pagina, è possibile inserire e ci utilizzando pochi attributi CSS.

Istruzioni

1

Aprire un documento di pagina Web utilizzando l'editor HTML o blocco note.

2

Incollare il seguente codice di div nella sezione body del documento:

< div class = "sovrapposizione" >
< img src="xyz.jpg" / >
< / div >

Questo crea un elemento div contenente un'immagine. Sostituire "xyz.jpg" con il nome di un'immagine sul disco rigido o l'URL di un'immagine su Internet. Questo div inoltre fa riferimento a una classe CSS denominata "sovrapposizione".

3

Creare la classe di sovrapposizione aggiungendo il codice riportato di seguito alla sezione di stile del documento:

.overlay {z-indice: 10000; bottom: 0px; posizione: absolute;}

Gli attributi in questa classe Dì ai browser di ancorare qualsiasi elemento che fa riferimento alla classe nella parte inferiore della pagina Web. Poiché il div che tiene i riferimenti di sovrapposizione foto questa classe, il browser inserirà l'immagine nella parte inferiore della pagina. L'attributo z-index determina se un elemento in una pagina Web viene visualizzato davanti a altro. Facendo questo valore alto, è assicurare che esso si sovrapporrà qualsiasi altro elemento nella pagina.

4

Salvare il documento e aprirlo in un browser. La sovrapposizione di foto viene visualizzata nella parte inferiore della pagina Web.

Consigli & Avvertenze

• Puoi anche posizionare orizzontalmente la sovrapposizione. Farlo aggiungendo uno dei seguenti attributi alla classe CSS: text-align: sinistra, text-align: centrare o allineare testo: giusto. I browser manterrà la sovrapposizione di foto sulla parte inferiore della pagina e spostarlo a sinistra, al centro o a destra a seconda dell'attributo è scegliere da questo elenco.