Indhold

• At træde
• Metode 1 af 4: Indstilling af en solid baggrundsfarve
• Metode 2 af 4: Brug af et billede som baggrund
• Metode 3 af 4: Opret en gradientbaggrund
• Metode 4 af 4: Indstil en farveanimation som baggrund

For at kunne indstille baggrunden for en webside i HTML, skal du bare foretage en lille ændring af "body" -elementet i stil> / stil> tags. Trinene afhænger af, hvordan dit tapet skal se ud. Lær hvordan du indstiller baggrunden for dit websted som en solid farve, billede, gradient eller farveanimation.

At træde

Metode 1 af 4: Indstilling af en solid baggrundsfarve

1. Åbn din HTML-fil i din yndlings teksteditor. Fra og med HTML5 understøttes HTML-attributten bgcolor> ikke længere. Baggrundsfarven skal ligesom alle andre stilaspekter på din side indstilles med CSS.
2. Tilføj stil> / stil> mærker dit dokument. Alle typografidata for din side (inklusive baggrundsfarven) skal være kodet i disse tags. Har du den stil> tags, der allerede er angivet, så kan du bare rulle til den del af filen.

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

3. Skriv "body" -elementet inde i stil> / stil> tags. Alt, hvad du ændrer til "body" -elementet i CSS, påvirker hele siden.

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

4. Føj egenskaben "baggrundsfarve" til "body" -elementet. I denne sammenhæng fungerer kun en stavemåde af "farve" (ikke: farve).

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

5. Placer den ønskede baggrundsfarve bag "baggrundsfarve". Du kan nu angive navnet på en farve (grøn, blå, redosv.), brug hexadecimale (hex) koder (f.eks. #000000 til sort, # ff0000 for rødt osv.) eller ved at indtaste RGB-værdien for farven (f.eks rgb (255,255,0) for gul). Nedenfor er et eksempel med hexadeximale koder, der gør baggrunden den samme som wikiHow-banneret:

   ! DOCTYPE html> html> head> style> body {baggrundsfarve: # 93B874; } / style> / head> body> / body> / html>

   • Hvid: #FFFFFF
   • Lyserød: # FFCCE6
   • Brændt Sienna: #993300
   • Indigo - # 4B0082
   • Violet - # EE82EE
   • Tjek w3schools.com HTML Color Picker for at finde de hex-koder for den farve, du ønsker.
6. Brug "baggrundsfarve" til at anvende baggrundsfarver på andre elementer. Ligesom du indstiller kropselementet, kan du bruge baggrundsfarve til at indstille baggrunden for andre elementer. Bare placer disse elementer inden i stil> / stil> med baggrundsfarveegenskaben.

   ! DOCTYPE html> html> head> style> body {baggrundsfarve: # 93B874; } h1 {baggrundsfarve: orange; } p {baggrundsfarve: rgb (255,0,0); } / style> / head> body> h1> Denne header får en orange baggrund / h1> p> Dette afsnit får en rød baggrund / p> / body> / html>

Metode 2 af 4: Brug af et billede som baggrund

1. Åbn HTML-filen i en teksteditor. Mange mennesker foretrækker at bruge et billede som baggrund for deres hjemmeside. Med dette kan du indstille et mønster, tekstur, foto eller ethvert andet billede som baggrund. Fra HTML5 skal alle baggrunde indstilles med CSS (Cascading Style Sheets) inden for stil> / stil> tags.
2. Tilføj stil> / stil> tags til din HTML-fil. Alle typografidata for din side (inklusive baggrundsfarven) skal angives i disse tags. Har du allerede stil> tags indstillet, rul til den del af filen.

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

3. Skriv "body" -elementet inde i stil> / stil> tags. Alt, hvad du ændrer til "body" -elementet i CSS, påvirker hele siden.

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

4. Føj egenskaben "baggrundsbillede" til "body" -elementet. Når du tilføjer denne egenskab, skal du bruge filnavnet på dit billede. Sørg for, at billedet er gemt i samme mappe som html-filen (eller tilføj den fulde sti til filen på din webserver).

   ! DOCTYPE html> html> head> style> body {baggrundsbillede: url ("imagename.png"); baggrundsfarve: # 93B874; } / style> / head> body> / body> / html>

   • Det er en god ide at medtage koden baggrundsfarve bare hvis baggrundsbilledet ikke indlæses.
5. Lag flere billeder. Du kan stable flere billeder oven på hinanden. Dette kan være nyttigt, hvis du har billeder med gennemsigtig baggrund, der supplerer hinanden, når de er overlejret.

   ! DOCTYPE html> html> head> style> body {baggrundsbillede: url ("image1.png"), url ("image2.gif"); baggrundsfarve: # 93B874; } / style> / head> body> / body> / html>

   • Det første billede er øverst. Det andet billede er under det første.

Metode 3 af 4: Opret en gradientbaggrund

1. Brug CSS til at oprette en gradientbaggrund. Hvis du leder efter noget lidt mere stiliseret end en solid farve, men ikke så travlt som en farveanimation, kan du prøve en gradientbaggrund. Gradienter er farver, der skifter til andre ligheder. Du kan bruge CSS til at oprette og justere din gradient. Før du begynder at oprette en farvegradient, skal du få tilstrækkelig viden om det grundlæggende ved formatering af en webside med CSS.
2. Forstå standardsyntaxen. Når du opretter en gradient, er der to stykker information, du har brug for: startpunktet og startvinklen og de farver, som overgangen mellem finder sted. Du kan vælge flere farver, som alle overlapper hinanden, og du kan angive en retning eller en vinkel for gradienten.

   baggrund: lineær gradient (retning / vinkel, farve1, farve2, farve3 osv.);

3. Opret en lodret gradient. Hvis du ikke angiver en retning, løber farven fra top til bund. Forskellige browsere har forskellige versioner af gradientfunktionen, så du bliver nødt til at tilføje forskellige versioner af koden.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Dette er nødvendigt for at sikre, at gradienten spænder over hele siden * /} body {baggrund: -webkit-lineær-gradient (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / baggrund: -o-lineær-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / baggrund: -moz-lineær-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / baggrund: lineær gradient (# 93B874, # C9DCB9); / * Standardsyntaks (skal være sidste) * / baggrundsfarve: # 93B874; / * Det er en god ide at indstille en baggrundsfarve, hvis gradienten ikke indlæses * /} / style> / head> body> / body> / html>

4. Opret en gradient med en retning. Tilføjelse af en retning til gradienten giver dig mulighed for at justere den måde, som farven skifter på. Bemærk, at forskellige browsere fortolker retninger forskelligt. De viser alle den samme farvegradient.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } krop {baggrund: -webkit-lineær-gradient (venstre, # 93B874, # C9DCB9); / * fra venstre til højre * / baggrund: -o-lineær-gradient (højre, # 93B874, # C9DCB9); / * slut til højre * / baggrund: -moz-lineær-gradient (højre, # 93B874, # C9DCB9); / * ende til højre * / baggrund: lineær gradient (til højre, # 93B874, # C9DCB9); / * flytter til højre side * / baggrundsfarve: # 93B874; / * det er en god ide at indstille en baggrundsfarve, hvis gradienten ikke indlæses * /} / style> / head> body> / body> / html>

5. Brug andre egenskaber til at justere gradienten. Du kan gøre meget mere med gradienter.
   • For eksempel kan du ikke kun bruge mere end to farver, men også placere en procentdel bag hver. Med dette kan du angive, hvor meget plads hvert farvesegment får.

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

   • Tilføj gennemsigtighed til farverne. Med dette kan du falme farverne. Brug den samme farve til at falme fra farven til intet. Du vil elske funktionen rgba () skal bruge til at angive farven. Slutværdien bestemmer graden af ​​gennemsigtighed: 0 til uigennemsigtig og 1 for gennemsigtig.

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

Metode 4 af 4: Indstil en farveanimation som baggrund

1. Naviger til stil> i din HTML-kode. Hvis du finder en solid baggrundsfarve, men ikke, skal du eksperimentere med at skifte farvebaggrund. Fra HTML 5 skal baggrundsfarver defineres med CSS (Cascading Style Sheets). Hvis du aldrig har indstillet en baggrundsfarve med CSS, skal du læse afsnittet om indstilling af en solid baggrundsfarve, før du prøver denne metode.
2. Tilføj ejendommen animation til "krop" -elementet. Du bliver nødt til at tilføje 2 forskellige egenskaber, da hver browser kræver anden kode.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animation: farveændring 60'erne uendelig; } / style> / head> body> / body> / html>

   • -webkit-animation ejendommen kræves til Chrome-baserede browsere (Chrome, Opera, Safari). animation er standarden for alle andre browsere.
   • farveændring er det, der kaldes animationen i dette eksempel.
   • 60'erne er varigheden (60 sekunder) af animationen / overgangen. Sørg for at indstille dette til både webkit og standardsyntaks.
   • uendelig angiver, at animationen skal gentages på ubestemt tid. Hvis du foretrækker at sløjfe farverne og derefter stoppe ved den sidste farve, kan du udelade denne del.
3. Føj farver til din animation. Nu skal du bruge @keyframes-reglen til at indstille baggrundsfarverne til at gå igennem samt hvor længe hver farve kan ses på siden. Igen skal du tilføje flere kodninger til de forskellige browsere.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s infinite; animation: farveændring 60'erne uendelig; } @ -webkit-keyframes farveændring {0% {baggrund: # 33FFF3;} 25% {baggrund: # 78281F;} 50% {baggrund: # 117A65;} 75% {baggrund: # DC7633;} 100% {baggrund: # 9B59B6;}} @keyframes colorchange {0% {baggrund: # 33FFF3;} 25% {baggrund: # 78281F;} 50% {baggrund: # 117A65;} 75% {baggrund: # DC7633;} 100% {baggrund: # 9B59B6;}} / style> / head> body> / body> / html>

   • Bemærk, at de to linjer (@ -webkit-keyframes og @keyframes har de samme værdier for baggrundsfarver og procenter. Det skal forblive ensartet, så oplevelsen forbliver den samme for alle browsere.
   • Procentdelene (0%, 25%osv.) repræsenterer den samlede varighed af animationen (60'erne). Når siden indlæses, vil baggrunden have farven indstillet til 0% og (# 33FFF3). Når 25% eller 60 sekunder af animationen er spillet, skifter baggrunden til # 78281F, og så videre.
   • Du kan justere varigheden og farverne efter ønske.