Come portare avanti un'immagine in CSS

March 12

Come portare avanti un'immagine in CSS


Quando si progetta pagine Web, l'immagine sul tuo sito può essere sovrapposta da un testo e altri contenuti della pagina. Fortunatamente, si avrà la possibilità di portare avanti l'immagine utilizzando Cascading Style Sheets (CSS). Con i CSS, è possibile utilizzare l'attributo z-index, simile al "portare in primo piano" capacità di un programma di elaborazione testi, per posizionare la grafica. Utilizzare editor di testo del computer per applicare il CSS che modifica la posizione della vostra immagine.

istruzione

1 Avviare un editor di testo e aprire il file sito Web che contiene l'immagine che si desidera modificare.

2 Digitare il seguente codice CSS dopo l'apertura tag <head>:

<Style type = "text / css">

</ Style>

3 Posizionare il cursore tra gli elementi di stile e immettere un cancelletto seguito da un periodo di propria scelta (ad esempio, "#forward"). Digitare un paio di parentesi graffe dopo la voce come si vede qui per creare la regola di stile per l'immagine:

avanti {}

Il simbolo di cancelletto crea un ID CSS, che consente di progettare una regola distinta per una particolare immagine sulla tua pagina.

4 Inserire "position: absolute;" tra le parentesi per indicare al browser di visualizzare l'immagine esattamente dove si specifica. Inoltre, digitare "z-index:" e immettere un valore positivo in pixel (px) in questo modo:

{Posizione in avanti: absolute; z-index: 5px; }

La z-index determina quale ordine di stack viene visualizzata l'immagine; di conseguenza, un valore più alto positivo specifica l'immagine viene portata avanti per primo.

5 Individuare il codice dell'immagine che si desidera assegnare alla regola di stile CSS e inserire "id = # avanti" all'interno del tag. Per esempio:

<Img id = "# avanti" />

Assicurarsi di sostituire "#forward" con il nome del proprio regola CSS.

6 Salvare il file e visualizzare in anteprima il vostro lavoro in un browser Web per visualizzare la nuova posizione dell'immagine.


Articoli Correlati