July 30
Utilizzando Cascading Style Sheets (CSS), è possibile inserire immagini e testo ovunque desiderate sulle pagine web. Una proprietà CSS - lo z-index - permette di cambiare anche l'ordine degli elementi di una pagina web, in modo che il testo possa andare al di sopra un'immagine. posizionamento delle immagini e il testo utilizzando i CSS richiede una certa pratica, ma i programmatori più esperti possono creare disegni complessi e belli, approfittando di tutte le offerte CSS.
1 Aprire una pagina web in un editor di codice come Notepad ++, jEdit o BBEdit. Individuare il tag <img> associato con l'immagine che si desidera mettere il testo sopra. Il tag <img> sarà simile a questa:
<Img />
2 Aggiungere una nuova riga sopra il tag <img> e quindi aggiungere una apertura tag <div>. Aggiungere una nuova riga sotto il tag <img> e digitare la chiusura </ div> tag. In apertura tag <div>, impostare l'attributo "ID" per un nome univoco e significativo. Il tuo codice risultante sarà simile a questo:
<Div id = "wrapper">
<Img />
</ Div>
3 Aggiungere una riga vuota sotto il tag e il tipo <img> in apertura e chiusura <div> tag di nuovo. Digitare il testo tra questi tag. Dare il <div> all'inizio del testo un attributo "ID" con un nome univoco e significativo. Ecco un esempio del codice risultante:
<Div id = "wrapper">
<Img />
<Div id = "image-text"> Ecco il testo di andare oltre l'immagine. </ Div>
</ Div>
4 Aprire il file .CSS se la pagina web utilizza uno. Se la pagina web non utilizza un file CSS o se non si è sicuri, quindi scorrere fino ai tag <head> e aggiungere <style> e </ style> tag. Mettere tutto il codice CSS o nel file .CSS o tra i tag <style>.
5 Digitare il seguente codice CSS:
wrapper {position: relative; } Involucro img {position: absolute; } Image-text {position: absolute; }
Il codice sopra imposta tipi posizionamento sulla confezione <div> tag nonché l'immagine e testo tra loro. Impostando l'involucro <div> di utilizzare il posizionamento relativo, possiamo utilizzare il posizionamento assoluto sui suoi tag nidificati senza l'immagine e il testo che va verso l'angolo superiore della pagina web. È possibile invece posizionarli all'interno della confezione <div>.
6 Aggiungere la proprietà z-index per l'immagine e il testo. Questa proprietà determina l'ordine di sovrapposizione degli elementi HTML. Gli elementi riportati i numeri più alti appariranno prima sulla pagina, e gli elementi forniti bassi numeri z-index vanno sotto di loro.
involucro img {position: absolute; z-index: 0; } Image-text {position: absolute; z-index: 1; }
Il codice di cui sopra mette il testo sopra l'immagine. Evitare l'uso di 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 la "sinistra" proprietà CSS "top" e. I numeri esatti utilizzati dipenderà dalle dimensioni della vostra immagine e come si desidera visualizzare il testo. Ecco un esempio di testo posizionato sopra l'angolo superiore sinistro dell'immagine:
involucro img {position: absolute; top: 0px; sinistra: 0px; z-index: 0; } Image-text {position: absolute; top: 0px; sinistra: 0px; z-index: 1; }