Hvordan lage en forløpningsfyll bakgrunn i HTML

September 17

Opprette et 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 en 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 biter av HTML-kode og stilark (CSS).

Bruksanvisning

Enkel HTML-format

1 Åpne din favoritt grafikk program, for eksempel Gimp, Photoshop eller Paintshop og skape et nytt bilde som er 5 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 fyllverktøyet og Gradient effekt, og velge to farger, en fra startpunktet på 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, der <body> -delen starter:

Substitute "name.jpg" for filen. Web side vil nå vise en gradient bakgrunn.

Ved hjelp av Cascading Style Sheets i HTML

4 Opprett en gjennomgripende stilark eller CSS metode for en gradient bakgrunn for din webside ved først å lage en gradient bilde som i forrige eksempel, men denne gangen for å gjøre bildet 1 piksel bred og 800 piksler høy. Standarden for visning på de fleste skjermer er 800 piksler. Lagre bildet som en 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:

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

"Bakgrunnen:" statement inneholder bildefilen og bane, og "gjenta-x" og "0% 0%" forteller leseren startposisjonen til bildet på xy-aksen, 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 ditt bilde er kortere enn på skjermen når du blar nedover på siden. I så fall må du legge til en bakgrunnsfarge til "bakgrunnen" erklæring i CSS-kode som matcher bunnen av bildet. Denne måten, hvis gradienten går ut, vil bakgrunnen matche bunnen av graderingen.

Hvis for eksempel den nederste av gradienten bildet er svart, koden vil være som følger:

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

Den "# 000000" er den heksadesimale tolkning for fargen svart. Den "bakgrunn" i denne uttalelsen vil overstyre URL-kommandoen. Så, hvis bildet er for kort, bakgrunnen hvor de bilde ender vil være svart.

Du kan plassere heksadesimale koden for din farge ved å åpne bildet i grafikkprogrammet, og velge Dropper verktøy og peker til bunnen sett av piksler. Når du velger farge og velg den i dine verktøy, kan du finne koden.