January 11
Quando si visualizza una pagina Web, la pagina che si vede spesso costituito da più blocchi chiamati "div". Un div è un elemento HTML che consente agli sviluppatori Web di combinare più elementi di pagina in una singola unità. Ad esempio, una pagina Web con una barra di navigazione in alto, una barra dei menu a sinistra e contenuti nel mezzo può essere costituito da tre div unica chiamata "Navbar", "LeftMenu" e "Contenuti". Utilizzare div elementi per inserire il testo in qualsiasi punto un quadro Web senza disegnare fisicamente testo sull'immagine.
1 Aprire il Blocco note e incollare questo testo nel documento vuoto:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> URL di prova con negozio Codice stringa query </ title>
// Caposezione ->
</ Head>
<Body>
<Div class = "immagine">
<Div class = "textOverlay">
<H2> La voce si sovrappone l'immagine </ h2>
</ Div>
</ Div>
</ Body>
</ Html>
Questo codice crea un blocco div intestazione di testo posizionata all'interno di un blocco immagine div.
2 Aggiungere questo codice foglio di stile per la sezione <head> del documento:
<Style type = "text / css">
.immagine {
background-image: url (xyz.jpg); background-repeat: no-repeat; altezza: 300px; width: 400px;
}
.textOverlay {
position: relative; sinistra: 100px; top: 200px;
}
</ Style>
La classe di "immagine" definisce un'immagine di sfondo. Sostituire xyz.jpg con il nome di un'immagine sul disco rigido. Sostituire 300px e 400px con le dimensioni, in pixel, della vostra immagine. Ad esempio, se l'immagine è di 600 pixel di altezza e 500 pixel di larghezza, le proprietà altezza e larghezza sarà simile a questa:
Altezza: 600px; width: 500px;
La classe "textOverlay" definisce le proprietà del testo. Il valore "relativo" dice al browser di posizionare il testo rispetto al suo contenitore. Le e proprietà "sinistra" e "top" definiscono i bordi sinistro e superiore del testo. In questo esempio, il browser posizionerà il testo 100 pixel dal bordo sinistro dell'immagine e 200 pixel dalla parte superiore del quadro.
3 Premere il tasto "CTRL + S" per aprire la finestra "Salva". Passare alla cartella Desktop e fare doppio clic su di esso per aprirlo. Tipo "test_image_overlay.html" senza virgolette nella casella di testo "Nome file" e fare clic su "Salva". Windows salvare il file come un documento HTML.
4 Individuare il file sul desktop e fare doppio clic su di esso per aprirlo nel browser. Verificare che il browser posiziona il testo sulla parte superiore dell'immagine.