Oprettelse af en blændende forløbsfyld , såsom når farverne suppleant fra mørk til lys i stigende eller faldende orden på dit website baggrund, kan være en iøjnefaldende effekt. Afhængigt af indholdet , kan visning af farver i høj grad øge tekster eller billeder på siden, eller henlede opmærksomheden på bestemte oplysninger . Der er et par måder at programmere denne effekt , der kræver bare et par enkle stykker af HTML-kode og cascading style sheets ( CSS). Ting du skal
Graphics program
Text editor program
Vis Flere Instruktioner Salg Simple HTML Format
1
Åbn din favorit grafikprogram , f.eks Gimp , Photoshop eller Paintshop og skabe et nyt billede , der er 5 pixels højt og 760 pixels på tværs ved hjælp af en 800 -pixel opløsning . For en 1024 -pixel opløsning , gøre billedet 984 pixels bredt , i stedet for.
2
Vælg Fill værktøjet og Gradient effekt, og vælg dine to farver , en fra udgangspunktet af gradienten , og den anden til slutpunktet.
3
Gem filen i et JPG-format i dit websted image bibliotek online og tilføj følgende i særlige sides HTML-kode , hvor
, afsnit starter : Hej
Stedfortræder " name.jpg " til din fil. Din webside vil nu vise en gradient baggrund.
Brug Cascading Style Sheets i HTML
4
Opret en cascading style sheet eller CSS metode en gradient baggrund for din web side ved først at lave en gradient billede som i det foregående eksempel , men denne gang at gøre billedet 1 pixel bred og 800 pixels højt . Standarden for visning på de fleste skærme er 800 pixels. Gem billedet som en JPG til din hjemmeside image bibliotek.
5.
Åbn og scanne gennem din CSS kode ved hjælp af din foretrukne teksteditor . Filen vil blive placeret i dit websted bibliotek med endelsen " . Css " . Føj følgende kode til din CSS krop sektion : Hej
body { baggrund : url ( billeder /name.jpg ) 0% 0% repeat -x , color: # 000000 ; højde: 800px ; padding: 5px ;}
"baggrund : " erklæring indeholder dit billede fil og sti , og " repeat -x " og " 0% 0% " fortæller browseren startpositionen af billedet på xy aksen , i dette tilfælde ved 0,0 eller i den øverste , venstre meste punkt på skærmen, og derefter at gentage billedet langs x -aksen , eller på tværs af siden.
6
Kontroller, om dit billede er kortere end skærmen, når du ruller ned på siden. Hvis ja, skal du føje en baggrundsfarve til ' baggrunden' erklæring i din CSS kode , der passer til bunden af billedet . Denne måde, hvis gradienten løber ud , vil baggrunden matche bunden af gradienten
For eksempel, hvis bunden af gradienten billedet er sort , vil koden være som følger: .
< P > body { baggrund: # 000000 url ( billeder /name.jpg ) 0% 0% repeat -x , color: # 000000 ; højde: 800px ; padding: 5px }
"# 000000 " er den hexadecimal tolkning for farven sort. Den " baggrund " i denne erklæring vil tilsidesætte URL kommando. Så hvis billedet er for kort, vil baggrunden , hvor billedet ender være sort .
Du kan lokalisere hexidecimal kode til din farve ved at åbne dit billede i dit grafikprogram , og vælge Dropper værktøj og peger til bunden sæt af pixels . Når du vælger farve , og vælg det i dine værktøjer, kan du finde koden .
