Nwlapcug.com


Come inserire testo su immagini in HTML

Come inserire testo su immagini in HTML


Quando si visualizza una pagina Web, la pagina che si vede spesso composto 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 sulla sinistra e il contenuto in mezzo può consistere di tre div unico denominato "Navbar", "LeftMenu" e "Contenuto". Utilizzare elementi div per inserire qualsiasi testo su un'immagine Web senza fisicamente disegnare testo sull'immagine.

Istruzioni

1

Aprire il blocco note e incollare questo testo nel documento vuoto:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / EN" "l'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns = "l'http://www.w3.org/1999/xhtml" >

< head >

< title > Test URL con stringa di Query codice Store < / title >

Sezione di testa-->

< / head >

< corpo >

< div class = "immagine" >

< div class = "textOverlay" >

< h2 > questo sovrapposizioni di intestazione immagine < / h2 >

< / div >

< / div >

< / body >

< / html >

Questo codice crea un blocco div di testo intestazione posizionato all'interno di un blocco div foto.

2

Aggiungere questo codice del foglio di stile per la sezione < head > del documento:

< style type = "text/css" >

.Picture () {

background-image: url (xyz.jpg); background-repeat: no-repeat; Altezza: 300px; Larghezza: 400px;

}

.textOverlay () {

Posizione: relativo; sinistra: 100px; Top: 200px;

}

< / stile >

La classe di "foto" 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, dell'immagine. Ad esempio, se l'immagine è di 600 pixel di altezza e 500 pixel di larghezza, le proprietà height e width saranno simile questo:

Altezza: 600px; Larghezza: 500px;

La classe "textOverlay" definisce le proprietà di testo. Il valore "relativo" indica al browser per posizionare il testo rispetto al relativo contenitore. Le proprietà di "sinistra" e "superiore" definiscono i bordi sinistro e superiore del testo. In questo esempio, il browser verrà posizionato il testo 100 pixel dal bordo sinistro dell'immagine e 200 pixel dalla parte superiore dell'immagine.

3

Premere "CTRL + S" per aprire la finestra "Salva". Passare alla cartella Desktop e fare doppio clic su esso per aprirlo. Digitare "test_image_overlay.html" senza virgolette nella casella di testo "Nome File" e clicca "Salva". Windows salverà il file come un documento HTML.

4

Individuare il file sul desktop e fare doppio clic su esso per aprirlo nel browser. Verificare che il browser posiziona il testo sopra l'immagine.

Consigli & Avvertenze

  • Regolare la posizione del testo sopra l'immagine modificando i valori di "sinistra" e "top" nella sezione stile. Aumentare il valore di "sinistra" per spostare il testo verso destra e diminuire il valore di "sinistra" per spostare il testo a sinistra. Aumentare il valore di "top" per spostare il testo verso il basso e diminuire il valore di "top" per spostare il testo in alto. Per determinare l'altezza e la larghezza di un'immagine, fare clic destro il file di immagine in Windows Explorer e selezionare "Proprietà". La finestra Proprietà verranno visualizzate le dimensioni dell'immagine.