Come Sovrapponi un'immagine in una posizione fissa su un sito web

March 9

Cascading Style Sheets, o CSS, in grado di definire la posizione di un'immagine in una pagina Web. CSS utilizza l'attributo "posizione" per descrivere come gli oggetti sono collocati in una pagina; i metodi di posizionamento più comuni sono statici, fissa, assoluta e relativa. Quando un'immagine è in posizione fissa, non si muove dalla sua posizione sul sito, anche quando i rotoli visitatori finestra su o giù. È possibile utilizzare una combinazione di HTML e CSS per fissare un'immagine qualsiasi punto su un sito web.

istruzione

1 Aggiungere "<style>" e "</ style>" tra la "<head>" e "</ head>" tag nel codice della pagina, in modo che il codice HTML simile al seguente:

<Head>
<Style>
</ Style>
</ Head>

2 Aggiungere ".overlay {}" tra il "<style>" e "</ style>" tag, quindi aggiungere "position: fixed;" tra le parentesi graffe arricciate:

.overlay {position: fixed; }

3 Inserire la posizione desiderata per l'immagine utilizzando il e l'attributo "sinistra" "top". "Left" sposta l'immagine a destra il numero di pixel specificato; "Top" sposta l'immagine in basso nella pagina il numero di pixel specificato. Per esempio:

.overlay {position: fixed; top: 20px; sinistra: 300px; }

4 Aggiungere il tag "<img>" tra il "<body>" e "</ body>" tag per sovrapporre l'immagine sulla pagina. Inserire la "src" e "di classe" attributo nel tag "<img>":

<Img src = "" class = "">

5 Inserire l'URL dell'immagine tra le virgolette nel campo "src". Inserire "sovrapposizione" tra le virgolette nel campo "id":

<Img src = "http: // mio sito / picture.jpg" class = "overlay">


Articoli Correlati