Opprette en blendende gradient fyll, for eksempel når fargene veksler fra mørk til lys i stigende eller synkende rekkefølge på nettstedets bakgrunn , kan være ganske iøynefallende effekt . Avhengig av innholdet , kan visningen av farger i stor grad forbedre tekster eller bilder på siden, eller trekke oppmerksomhet til bestemte opplysninger . Det finnes noen måter å programmere denne effekten , som krever bare noen få enkle stykker med HTML-kode og gjennomgripende stilark ( CSS) . Du trenger
Graphics program
tekst editor program
Vis flere instruksjoner
Enkel HTML Format
en
Åpne din favoritt grafikk program, for eksempel Gimp , Photoshop , eller Paintshop og skape et nytt bilde som er fem piksler høyt og 760 piksler over ved hjelp av en 800 - pikslers oppløsning. For en 1024 - pikslers oppløsning , gjøre bildet 984 piksler bred , i stedet.
2
Velg Fyll-verktøyet og Gradient effekt, og velge to farger , en fra startpunktet for graderingen, og den andre til sluttpunktet .
3
Lagre denne filen i en JPG- format i nettstedets image katalog på nettet og legge til følgende i den aktuelle sidens HTML-kode , hvor
; del starter : en
Substitute " name.jpg " på filen. Web- siden vil nå vise en gradient bakgrunn.
Hjelp Cascading Style Sheets i HTML
4
Lag et gjennomgripende stilark eller CSS metode for en gradient bakgrunn for Web ditt side ved først å lage en gradient bilde som i forrige eksempel , men denne gangen for å gjøre bildet en pixel bred og 800 piksler høyt . Standarden for visning på de fleste skjermer er 800 piksler. Lagre bildet som JPG til nettstedets image katalogen.
5
Åpne og skanne gjennom CSS-kode ved hjelp av din favoritt teksteditor . Filen vil bli plassert i ditt nettsted katalog med suffikset " . Css " . Legg til følgende kode i CSS hoveddel : en
body {background : url ( images /name.jpg ) 0 % 0 % repeat- x ; color: # 000000 ; height: 800px ; padding: 5px ; }
"bakgrunn : " statement inneholder bildefilen og bane , og " repeat- x " og " 0 % 0 % " er å fortelle leseren startposisjonen av bildet på xy akse, i dette tilfellet på 0,0, eller på den øverste , venstre - punktet på skjermen , og deretter å gjenta bildet langs x - aksen , eller på tvers av siden .
6
Sjekk om bildet ditt er kortere enn skjermen når du blar nedover på siden. I så fall må du legge til en bakgrunnsfarge til " bakgrunnen" erklæring i din CSS-kode som passer i bunnen av bildet . På denne måten , dersom den gradient løper ut , vil bakgrunnen slik at nederste av gradient
Hvis for eksempel bunnen av gradienten bildet er svart , vil koden være som følger: .
< P > body {background : # 000000 url ( images /name.jpg ) 0 % 0 % repeat- x ; color: # 000000 ; height: 800px ; padding: 5px }
"# 000000 " er heksadesimal tolkning for fargen svart. "Bakgrunnen " i denne uttalelsen vil overstyre URL -kommandoen . Så , hvis bildet er for kort, vil bakgrunnen hvor bildet slutter være svart .
Du kan finne heksadesimal kode for farge ved å åpne bildet ditt i ditt grafikk program , og velge Dropper verktøyet og peker til den nederste sett av piksler. Når du velger farge og velg den i dine verktøy , kan du finne koden .