Uno dei segreti per fare elementi vengono visualizzati in qualsiasi punto di una pagina Web è sapere come utilizzare fogli di stile CSS in modo efficace. CSS, per esempio, ha un pratico proprietà "background-image" che i progettisti del sito utilizzare per aggiungere sfondi fotografici alle pagine Web. È inoltre possibile utilizzare questa proprietà per aggiungere foto di sfondo ad altri elementi della pagina, come i contenitori div. Quando è necessario inserire una casella di testo in cima ad una foto, inserire la casella di testo all'interno di un div, e dare il div un valore "background-image". I visitatori del sito saranno quindi in grado di digitare le informazioni nella casella di testo, anche se una foto appare dietro di esso.

istruzione

1 Aprire una delle tue pagine HTML utilizzando Blocco note o un editor HTML.

2 Aggiungere il seguente codice HTML per la sezione corpo della pagina:

<Div class = "container1">

<Div class = "TextBox1">

<Input id = "Text1" type = "text" />

</ Div>

</ Div>

Questo aggiunge un div alla pagina. Questo div fa riferimento a una classe CSS chiamato "container1." Il div contiene un div. Che div fa riferimento a una classe CSS chiamato "textbox1." Questo div contiene anche una casella di testo.

3 Incolla questo codice nella sezione head della pagina:

<Style type = "text / css">

.container1 {background-image: URL ( 'xyz.jpg'); background-repeat: no-repeat;

height: 200px; width: 300px;

}

.textbox1 {margin-top: 0px; margin-left: 0px;}

</ Style>

Questa dichiarazione foglio di stile definisce il "container1" e classi "TextBox1" descritto nel passaggio precedente. La classe "Container1" ha un attributo "background-image". valore "URL", che è attributo è "xyz.jpg." Sostituire "xyz.jpg" con il nome di un file di immagine sul computer. Sostituire "200px" con altezza in pixel dell'immagine. Sostituire "300px" con larghezza in pixel dell'immagine.

Si noti la definizione della classe "textbox1". Ha "margin-top" e gli attributi "margin-left". Quegli attributi dicono browser dove posizionare la casella di testo in relazione al bordo superiore sinistro della foto. Poiché il valore di entrambi gli attributi è pari a zero in questo esempio, viene visualizzata la casella di testo in alto bordo sinistro della foto.

4 Salvare la pagina e visualizzarlo nel browser. Il browser mostrerà la casella di testo in alto a sinistra della foto.

5 Tornare al documento HTML nel vostro editor e individuare questa definizione di classe:

.textbox1 {margin-top: 0px; margin-left: 0px;}

Eliminare questa linea e sostituirla con la seguente riga:

.textbox1 {margin-top: 40px; margin-left: 50px;}

Questo cambia margine superiore della casella di testo a 40 pixel e che il margine sinistro di 50 pixel.

6 Salvare la pagina di nuovo, e visualizzarlo nel browser. La casella di testo viene visualizzato in una posizione diversa sopra la foto. Il suo bordo superiore è di 40 pixel dalla parte superiore della foto e 50 pixel dal bordo sinistro della foto. Si noti che si può ancora vedere la casella di testo, anche se contiene alcun testo. La foto in background non influenza l'aspetto della casella di testo.

Consigli e avvertenze

• La capacità di controllare i margini superiore e sinistro della casella di testo consente di rendere la casella di testo viene visualizzato in qualsiasi posizione sopra la foto. Esperimento con diversi valori di "margin-top" e "margin-left". Vedere come le modifiche a quei valori causano la casella di testo a comparire in diverse posizioni sopra la foto.
• Se non si conosce l'altezza e la larghezza dei pixel tua foto, trovare quei valori utilizzando Windows Explorer. Avviare Esplora risorse, individuare il file di immagine e destro del mouse per visualizzare un menu. Fare clic su "Proprietà" e quindi su "Dettagli". La foto di larghezza e altezza dimensioni appaiono in questa scheda.