Normalmente, quando si scrive codice HTML per visualizzare un'immagine con testo in una pagina Web, il testo viene disposto intorno all'immagine per assicurarsi che entrambi siano completamente visibili. Tuttavia, utilizzando le proprietà CSS in linea, è possibile scrivere il testo che galleggia sopra un'immagine. Avvolgendo gli elementi "img" e "p" in un "div" contenitore per dare loro un comune riferimento di posizionamento, è possibile garantire che il testo che si desidera che galleggia sopra l'immagine, non importa dove è nella pagina.

Istruzioni

1

Inserire le seguenti righe di codice nel corpo del documento HTML in cui si desidera visualizzare l'immagine:

< div style = "position: relative; width: 1px;" >

< img style = "z-index: -1;" attributo dell'elemento "img" per l'URL dell'immagine che si desidera utilizzare.

3

Modificare la "larghezza" proprietà CSS dell'elemento "div" per riflettere la larghezza dell'immagine in pixel. Questo farà sì che il testo viene adattato ai bordi dell'immagine. Se si omette questa proprietà, il testo continuerà oltre il bordo dell'immagine e invece a capo della pagina o un altro contenitore.

4

Digitare il testo al posto del testo di "Floating on Top" nell'elemento "p" mostrato nell'esempio precedente. Questo testo può essere stilizzato come qualsiasi altro testo in HTML.