Utilizza Cascading Style Sheets (CSS), è possibile inserire immagini e testo dove vuoi sulle pagine web. Una proprietà CSS - lo z-index - rende possibile anche cambiare l'ordine degli elementi in una pagina web, quindi il testo può andare sopra un'immagine. Posizionamento di testo utilizzando i CSS e immagini richiede una certa pratica, ma i programmatori più esperti possono creare disegni complicati e bei approfittando di tutte le offerte CSS.
Istruzioni
Modificare il codice HTML
1
Aprire una pagina web in un editor di codice come NotePad + +, jEdit o BBEdit. Individuare il tag < img > associato all'immagine che si desidera disporre il testo sopra. Il tag < img > sarà simile a questo:
< img / >
2
Aggiungere una nuova riga sopra il tag < img > e quindi aggiungere un tag di apertura < div >. Aggiungere una nuova riga sotto il tag < img > e il tipo di chiusura < / div > tag. Nel tag di apertura < div >, impostare l'attributo "ID" per un nome univoco e significativo. Il codice risultante sarà simile a questo:
< div id = "wrapper" >
< img / >
< / div >
3
Aggiungere una riga vuota sotto il tag < img > e il tipo in apertura e chiusura tag < div > nuovo. Digitare il testo tra i tag. Dare il < div > all'inizio del testo di un attributo "ID" con un nome univoco e significativo. Ecco un esempio del codice risultante:
< div id = "wrapper" >
< img / >
< div id = "immagine-testo" > Ecco il testo di andare oltre l'immagine. < / div >
< / div >
Aggiungere il codice CSS
4
Apri il tuo. File CSS se la pagina web utilizza uno. Se la pagina web non utilizza un file CSS, o se non siete sicuri, quindi scorrere fino ai tag < head > e aggiungere < style > e < / stile > Tag. Luogo qualsiasi CSS codice sia nella. File CSS o tra i tag < style >.
5
Digitare il seguente codice CSS:
wrapper {posizione: relativo;} wrapper img {posizione: assoluta;} immagine-testo {Posizione: assoluta;}
Il codice sopra imposta posizionamento tipi i tag < div > avvolgimento nonché sull'immagine e testo tra di loro. Impostando il wrapper < div > utilizzare il posizionamento relativo, possiamo usare il posizionamento assoluto il suo tag nidificati senza l'immagine e testo andando verso l'angolo superiore della pagina web. È invece possibile posizionare li dentro l'involucro < div >.
6
Aggiungere la proprietà z-index a tua immagine e testo. Questa proprietà determina l'ordine di sovrapposizione degli elementi HTML. Dato il più alto numero di elementi visualizzato per primi nella pagina ed elementi dati i numeri più bassi di indice z andare sotto di loro.
wrapper img {posizione: absolute; z-indice: 0;} immagine-testo {Posizione: absolute; z-indice: 1;}
Il codice sopra riportato mette il testo sopra l'immagine. Evitare di usare i numeri negativi per z-index o utilizzando numeri molto grandi.
7
Controllare l'esatto posizionamento degli elementi posizionati in modo assoluto - in questo caso, l'immagine e il testo - utilizzando le proprietà CSS "superiore" e "sinistra". I numeri esatti utilizzati dipenderà la dimensione della vostra immagine e come si desidera visualizzare il testo. Ecco un esempio di testo posizionato sopra l'angolo superiore sinistro dell'immagine:
wrapper img {posizione: absolute; top: 0px; sinistra: 0px; z-indice: 0;} immagine-testo {Posizione: absolute; top: 0px; sinistra: 0px; z-indice: 1;}
Consigli & Avvertenze
- Scopri il modello di riquadro CSS dentro e fuori. Questo ti aiuterà a ottenere una migliore comprensione del posizionamento CSS.
- Verificare la pagina web in Internet Explorer 8 e sotto se siete preoccupati per come le pagine web si presenta agli utenti del browser IE precedenti. Internet Explorer 6 a 8 contiene molti bug relativi al CSS.