Innhold

• Å trå
• Metode 1 av 4: Angi en solid bakgrunnsfarge
• Metode 2 av 4: Bruke et bilde som bakgrunn
• Metode 3 av 4: Lag en gradientbakgrunn
• Metode 4 av 4: Sett en fargeanimasjon som bakgrunn

For å kunne sette bakgrunnen til en webside i HTML, trenger du bare å gjøre en liten endring i "body" -elementet i stil> / stil> koder. Trinnene avhenger av hvordan du vil at bakgrunnen din skal se ut. Lær hvordan du setter bakgrunnen til nettstedet ditt som en hel farge, bilde, gradient eller fargeanimasjon.

Å trå

Metode 1 av 4: Angi en solid bakgrunnsfarge

1. Åpne HTML-filen i favoritt teksteditoren din. Fra og med HTML5 støttes ikke lenger HTML-attributtet bgcolor>. Bakgrunnsfargen, som alle andre stilaspekter på siden din, må stilles inn med CSS.
2. Legg til stil> / stil> merker dokumentet ditt. All stildata for siden din (inkludert bakgrunnsfargen) skal være kodet i disse kodene. Har du stil> merkene som allerede er angitt, så kan du bare bla til den delen av filen.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Skriv inn "kropp" -elementet inne i stil> / stil> koder. Alt du endrer til "body" -elementet i CSS, vil påvirke hele siden.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Legg til "bakgrunnsfarge" -egenskapen til "body" -elementet. I denne sammenheng vil bare en stavemåte med "farge" fungere (ikke: farge).

   ! DOCTYPE html> html> head> style> body {background-color:} / style> / head> body> / body> / html>

5. Plasser ønsket bakgrunnsfarge bak "bakgrunnsfarge". Du kan nå angi navnet på en farge (grønn, blå, red, etc.), bruk heksadesimale (hex) koder (f.eks. #000000 for svart, # ff0000 for rødt osv.) eller ved å skrive inn RGB-verdien for fargen (for eksempel rgb (255,255,0) for gul). Nedenfor er et eksempel med heksadesimale koder, som gjør bakgrunnen den samme som wikiHow-banneret:

   ! DOCTYPE html> html> head> style> body {bakgrunnsfarge: # 93B874; } / stil> / hode> kropp> / kropp> / html>

   • Hvit: #FFFFFF
   • Lyserosa: # FFCCE6
   • Brent Sienna: #993300
   • Indigo - # 4B0082
   • Fiolett - # EE82EE
   • Ta en titt på w3schools.com HTML Color Picker for å finne heksekodene for hvilken farge du vil.
6. Bruk "bakgrunnsfarge" for å bruke bakgrunnsfarger på andre elementer. Akkurat som du setter kroppselementet, kan du bruke bakgrunnsfarge til å angi bakgrunnen til andre elementer. Bare plasser disse elementene i stil> / stil> med bakgrunnsfargeegenskapen.

   ! DOCTYPE html> html> head> style> body {bakgrunnsfarge: # 93B874; } h1 {bakgrunnsfarge: oransje; } p {bakgrunnsfarge: rgb (255,0,0); } / style> / head> body> h1> Denne overskriften får en oransje bakgrunn / h1> p> Dette avsnittet får en rød bakgrunn / p> / body> / html>

Metode 2 av 4: Bruke et bilde som bakgrunn

1. Åpne HTML-filen i et tekstredigeringsprogram. Mange foretrekker å bruke et bilde som bakgrunn for nettstedet sitt. Med dette kan du angi et mønster, tekstur, bilde eller et hvilket som helst annet bilde som bakgrunn. Fra HTML5 må alle bakgrunner settes med CSS (Cascading Style Sheets) i stil> / stil> koder.
2. Legg til stil> / stil> tagger til HTML-filen. Alle stildata for siden din (inkludert bakgrunnsfargen) skal angis i disse kodene. Har du allerede stil> koder satt, bla til den delen av filen.

   ! DOCTYPE html> html> head> style> / style> / head> / html>

3. Skriv inn "kropp" -elementet inne i stil> / stil> koder. Alt du endrer til "body" -elementet i CSS, vil påvirke hele siden.

   ! DOCTYPE html> html> head> style> body {} / style> / head> body> / body> / html>

4. Legg til "bakgrunnsbilde" -egenskapen til "body" -elementet. Når du legger til denne egenskapen, trenger du filnavnet på bildet ditt. Forsikre deg om at bildet er lagret i samme mappe som html-filen (eller legg til hele banen til filen på webserveren din).

   ! DOCTYPE html> html> head> style> body {bakgrunnsbilde: url ("imagename.png"); bakgrunnsfarge: # 93B874; } / stil> / hode> kropp> / kropp> / html>

   • Det er lurt å ta med koden bakgrunnsfarge bare i tilfelle bakgrunnsbildet ikke lastes inn.
5. Lag flere bilder. Du kan stable flere bilder oppå hverandre. Dette kan være nyttig hvis du har bilder med gjennomsiktig bakgrunn som utfyller hverandre når de er lagt over.

   ! DOCTYPE html> html> head> style> body {background-image: url ("image1.png"), url ("image2.gif"); bakgrunnsfarge: # 93B874; } / stil> / hode> kropp> / kropp> / html>

   • Det første bildet er på toppen. Det andre bildet er under det første.

Metode 3 av 4: Lag en gradientbakgrunn

1. Bruk CSS til å lage en gradientbakgrunn. Hvis du leter etter noe litt mer stilisert enn en solid farge, men ikke så opptatt som en fargeanimasjon, kan du prøve en gradientbakgrunn. Graderinger er farger som endres til andre likheter. Du kan bruke CSS til å lage og justere gradienten din. Før du begynner å lage en fargeovergang, bør du få tilstrekkelig kunnskap om det grunnleggende om formatering av en webside med CSS.
2. Forstå standardsyntaks. Når du lager en gradient, er det to opplysninger du trenger: startpunktet og startvinkelen, og fargene mellom hvilke overgangen vil skje. Du kan velge flere farger som alle overlapper hverandre, og du kan angi en retning eller en vinkel for stigningen.

   bakgrunn: lineær gradient (retning / vinkel, farge1, farge2, farge3, ​​etc.);

3. Lag en vertikal gradient. Hvis du ikke indikerer en retning, vil fargen løpe fra topp til bunn. Ulike nettlesere har forskjellige versjoner av gradientfunksjonen, så du må legge til forskjellige versjoner av koden.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Dette kreves for å sikre at gradienten spenner over hele siden * /} body {bakgrunn: -webkit-lineær-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / bakgrunn: -o-lineær-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / bakgrunn: -moz-lineær-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / bakgrunn: lineær gradient (# 93B874, # C9DCB9); / * Standard syntaks (må være sist) * / bakgrunnsfarge: # 93B874; / * Det er en god ide å angi en bakgrunnsfarge, hvis gradienten ikke lastes inn * /} / stil> / hode> kropp> / kropp> / html>

4. Lag en gradient med en retning. Hvis du legger til en retning i gradienten, kan du justere måten fargen forskyves på. Vær oppmerksom på at forskjellige nettlesere vil tolke retninger forskjellig. De vil alle vise den samme fargegradienten.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } kropp {bakgrunn: -webkit-lineær-gradient (venstre, # 93B874, # C9DCB9); / * fra venstre til høyre * / bakgrunn: -o-lineær-gradient (høyre, # 93B874, # C9DCB9); / * slutt til høyre * / bakgrunn: -moz-lineær-gradient (høyre, # 93B874, # C9DCB9); / * slutt til høyre * / bakgrunn: lineær gradient (til høyre, # 93B874, # C9DCB9); / * flytter til høyre * / bakgrunnsfarge: # 93B874; / * det er en god ide å angi en bakgrunnsfarge, hvis gradienten ikke lastes inn * /} / stil> / hode> kropp> / kropp> / html>

5. Bruk andre egenskaper for å justere gradienten. Du kan gjøre mye mer med stigninger.
   • For eksempel kan du ikke bare bruke mer enn to farger, men også plassere en prosentandel bak hver. Med dette kan du indikere hvor mye plass hvert fargesegment vil få.

     bakgrunn: lineær gradient (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Legg gjennomsiktighet til fargene. Med dette kan du falme fargene. Bruk samme farge for å falme fra fargen til ingenting. Du vil elske funksjonen rgba () må bruke for å indikere fargen. Sluttverdien bestemmer graden av gjennomsiktighet: 0 for ugjennomsiktig og 1 for gjennomsiktig.

     bakgrunn: lineær gradient (til høyre, rgba (147,184,116.0), rgba (147,184,116.1));

Metode 4 av 4: Sett en fargeanimasjon som bakgrunn

1. Navigere til stil> i HTML-koden din. Hvis du finner en solid bakgrunnsfarge, men ikke, kan du eksperimentere med å endre bakgrunnsfarge. Fra HTML 5 må bakgrunnsfarger defineres med CSS (Cascading Style Sheets). Hvis du aldri har angitt en bakgrunnsfarge med CSS, kan du lese delen om å sette en solid bakgrunnsfarge før du prøver denne metoden.
2. Legg til eiendommen animasjon til "kropp" -elementet. Du må legge til to forskjellige egenskaper, ettersom hver nettleser krever annen kode.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animasjon: fargeendring 60-tallet uendelig; } / stil> / hode> kropp> / kropp> / html>

   • -webkit-animasjon eiendommen kreves for Chrome-baserte nettlesere (Chrome, Opera, Safari). animasjon er standarden for alle andre nettlesere.
   • fargeskifte er det som kalles animasjonen i dette eksemplet.
   • 60-tallet er varigheten (60 sekunder) av animasjonen / overgangen. Sørg for å angi dette for både webkit og standardsyntaks.
   • uendelig indikerer at animasjonen skal gjenta på ubestemt tid. Hvis du foretrekker å sløyfe fargene og deretter stoppe ved den siste fargen, kan du utelate denne delen.
3. Legg til farger i animasjonen din. Nå skal du bruke @keyframes-regelen til å angi bakgrunnsfargene som skal gjennomgå, samt hvor lenge hver farge kan sees på siden. Igjen, må du legge til flere kodinger for de forskjellige nettleserne.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animasjon: fargeendring 60-tallet uendelig; } @ -webkit-keyframes colorchange {0% {bakgrunn: # 33FFF3;} 25% {bakgrunn: # 78281F;} 50% {bakgrunn: # 117A65;} 75% {bakgrunn: # DC7633;} 100% {bakgrunn: # 9B59B6;}} @keyframes colorchange {0% {bakgrunn: # 33FFF3;} 25% {bakgrunn: # 78281F;} 50% {bakgrunn: # 117A65;} 75% {bakgrunn: # DC7633;} 100% {bakgrunn: # 9B59B6;}} / style> / head> body> / body> / html>

   • Merk at de to linjene (@ -webkit-keyframes og @keyframes har de samme verdiene for bakgrunnsfarger og prosenter. Det skal forbli ensartet slik at opplevelsen forblir den samme for alle nettlesere.
   • Prosentandelen (0%, 25%, etc.) representerer den totale varigheten av animasjonen (60-tallet). Når siden lastes inn, vil bakgrunnen ha fargen satt til 0% og (# 33FFF3). Når 25% eller 60 sekunder av animasjonen har spilt, vil bakgrunnen gå over til # 78281F, og så videre.
   • Du kan justere varighet og farger etter ønske.