Nwlapcug.com


Come fare foto Unscrollable con HTML



La maggior parte delle pagine Web sono immagini di sfondo che si muovono verticalmente quando si fa clic su barra di scorrimento del browser. Tutti gli elementi in una pagina scorrere per impostazione predefinita. Utilizza fogli di stile o CSS, puoi modificare questo comportamento predefinito e fare qualsiasi immagine di sfondo unscrollable. Questo crea un intrigante effetto "fluttuante". Visitatori del sito lo scorrimento di una pagina, vedere tua mossa contenuto, ma l'immagine di sfondo rimane fissa in una posizione specifica.

Istruzioni

1

Avviare Blocco note e aprire uno dei documenti HTML. Scegli un documento che è abbastanza a lungo per scorrere. Idealmente, si tratta di una pagina Web contenente un sacco di testo.

2

Aggiungere il seguente blocco di codice CSS nella sezione "head" del documento:

< style type = "text/css" >

corpo

{

background-image: URL ("someImage.jpg"); background-attachment: fisso;

background-repeat: no-repeat; sfondo-posizione: centro centro;

}

< / stile >

3

Sostituire "someImage.jpg" con il nome di una delle tue immagini. Per esempio, se si desidera utilizzare un'immagine denominata "defrag.gif" è nella cartella "Strumenti" sul disco "C", rendere il blocco di codice simile al seguente:

< style type = "text/css" >

corpo

{

background-image: URL ("C:\Tools\defrag.gif"); background-attachment: fisso;

background-repeat: no-repeat; sfondo-posizione: centro centro;

}

< / stile >

Se l'immagine è sul Web, utilizzare l'URL dell'immagine. La proprietà background-attachment determina se l'immagine scorre. Non scorra se si imposta il valore a "fisso", come mostrato sopra. Il valore di "no-repeat" dice al browser di non ripetere l'immagine per creare un effetto tegola. La proprietà background-position consente di impostare le coordinate orizzontali e verticali dell'immagine. In questo caso, sono entrambi "centro". In questo modo il browser centrare l'immagine nella pagina Web.

4

Salvare il documento HTML. Aprirlo nel tuo browser e scorrere la pagina Web. L'immagine non si muoverà.

Consigli & Avvertenze

  • Per consentire l'immagine scorrere, modificare valore di background-attachment da "fisso" per "scorrere". Altri possibili valori di posizionamento per la proprietà background-position includono "in alto", "fondo", "sinistra" e "destra". Per esempio, se si desidera l'immagine fissa nella parte superiore destra della pagina Web, modificare il valore di sfondo-posizione da "centro centro" - come mostrato in questo esempio - a "in alto a destra" (senza virgolette). È anche possibile utilizzare i valori dei pixel per le coordinate orizzontali e verticali. Invece di utilizzare "in alto a destra" o "centro", è possibile utilizzare invece 200px 400px. Questo consentirà di correggere le foto e 200 pixel dal bordo sinistro della pagina e 400 pixel dalla parte superiore della pagina.