Creazione di un gradiente abbagliante riempimento , come ad esempio quando i colori si alternano dal buio alla luce in ordine crescente o decrescente su sfondo del tuo sito web , possono essere piuttosto un effetto eye-catching . A seconda del contenuto , la visualizzazione dei colori può migliorare notevolmente i testi o le immagini sulla pagina , o attirare l'attenzione su indicazioni particolari. Ci sono alcuni modi per programmare questo effetto , che richiede solo pochi semplici pezzi di codice HTML e fogli di stile (CSS) . Cose che ti serviranno
Graphics programma
Text Editor programma
Mostra più istruzioni
semplice HTML Format
1

Aprite il vostro programma di grafica preferito , come ad esempio Gimp , Photoshop , o verniciatura e creare una nuova immagine , che è di 5 pixel di altezza e 760 pixel in orizzontale usando una risoluzione di 800 pixel. Per una risoluzione di 1024 pixel , rendono l'immagine larga 984 pixel , invece .

2 Selezionate lo strumento Riempimento e l'effetto sfumatura , e scegliere i due colori , uno dal punto di partenza del gradiente, e l'altro per il punto finale.
3

Salva il file in formato JPG nella directory immagine online del tuo sito web e aggiungere il seguente codice in HTML della pagina del particolare , dove il , sezione inizia :

Substitute " name.jpg " per il file . La tua pagina web si osserva un gradiente di sfondo.
Utilizzando fogli di stile in HTML
4

Creare un foglio di stile CSS o metodo CSS di un gradiente di sfondo per il vostro Web pagina facendo prima un immagine gradiente come nell'esempio precedente , solo che questa volta rendendo l'immagine 1 pixel di larghezza e 800 pixel di altezza . Lo standard per la visualizzazione su più schermi è di 800 pixel . Salva l'immagine come JPG di directory delle immagini del tuo sito web .
5

Aprire e la scansione attraverso il vostro codice CSS utilizzando il vostro editor di testo preferito . Il file verrà posizionato nella directory di sito web con il suffisso " . Css" . Aggiungere il seguente codice alla vostra sezione corpo CSS :
corpo

{background : url ( images /name.jpg ) 0 % 0 % repeat - x ; color : # 000000 ; height: 800px ; padding: 5px ; }

il "background: " dichiarazione contenente il file immagine e il percorso , e il " repeat- x " e " 0 % 0 % " dice al browser la posizione iniziale dell'immagine sulla
6 < p assi xy , in questo caso a 0,0 , o al più in alto , punto più a sinistra dello schermo , e poi per ripetere l'immagine lungo l' asse x , o attraverso la pagina. > Controllare se l'immagine è più corta della schermata quando si scorre la pagina. Se è così, è necessario aggiungere un colore di sfondo per la dichiarazione di 'background' nel codice CSS che corrisponda alla parte inferiore dell'immagine . In questo modo, se il gradiente si esaurisce , lo sfondo corrisponde al fondo del gradiente

Per esempio, se la parte inferiore dell'immagine gradiente è nero , il codice sarebbe il seguente: .
< P > body {background : # 000000 url ( immagini /name.jpg ) 0 % 0 % repeat - x ; color : # 000000 ; height: 800px ; padding: 5px }

" # 000000 " è il interpretazione esadecimale per il colore nero . Il " fondo " in questa istruzione ha la priorità il comando URL . Quindi , se l'immagine è troppo breve, il fondo dove l'immagine finisce sarà nero .

È possibile individuare il codice esadecimale per il colore , aprendo la vostra immagine nel vostro programma di grafica , e selezionando lo strumento Contagocce e indicando al bottom set di pixel . Una volta scelto il colore e selezionate nei vostri strumenti, è possibile trovare il codice .