Innehåll

• Att gå
• Metod 1 av 4: Ställa in en solid bakgrundsfärg
• Metod 2 av 4: Använd en bild som bakgrund
• Metod 3 av 4: Skapa en tonad bakgrund
• Metod 4 av 4: Ställ in en färganimering som bakgrund

För att kunna ställa in bakgrunden till en webbsida i HTML behöver du bara göra en liten ändring av "body" -elementet i stil> / stil> taggar. Stegen beror på hur du vill att din tapet ska se ut. Lär dig hur du ställer in bakgrunden på din webbplats som en hel färg, bild, lutning eller färganimering.

Att gå

Metod 1 av 4: Ställa in en solid bakgrundsfärg

1. Öppna din HTML-fil i din favorittextredigerare. Från och med HTML5 stöds inte längre HTML-attributet bgcolor>. Bakgrundsfärgen, som alla andra stilaspekter på din sida, måste ställas in med CSS.
2. Lägg till stil> / stil> taggar ditt dokument. All stilinformation för din sida (inklusive bakgrundsfärgen) ska kodas i dessa taggar. Har du stil> taggar som redan anges, då kan du bara bläddra till den delen av filen.

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

3. Skriv "body" -elementet inuti stil> / stil> taggar. Allt du ändrar till "body" -elementet i CSS påverkar hela sidan.

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

4. Lägg till "bakgrundsfärg" -egenskapen till "body" -elementet. I detta sammanhang fungerar bara en stavning av "färg" (inte: färg).

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

5. Placera önskad bakgrundsfärg bakom "bakgrundsfärg". Du kan nu ange namnet på en färg (grön, blå, red, etc.), använd hexadecimala (hex) koder (t.ex. #000000 för svart, # ff0000 för rött etc.) eller genom att skriva in RGB-värdet för färgen (t.ex. rgb (255 255,0) för gul). Nedan följer ett exempel med hexadeximala koder, vilket gör bakgrunden densamma som wikiHow-bannern:

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } / style> / head> body> / body> / html>

   • Vit: #FFFFFF
   • Ljusrosa: # FFCCE6
   • Bränd Sienna: #993300
   • Indigo - # 4B0082
   • Violett - # EE82EE
   • Kolla in w3schools.com HTML Color Picker för att hitta hexkoderna för vilken färg du vill.
6. Använd "bakgrundsfärg" för att tillämpa bakgrundsfärger på andra element. Precis som du ställer in kroppselementet kan du använda bakgrundsfärg för att ställa in bakgrunden för andra element. Placera bara dessa element i stil> / stil> med bakgrundsfärgegenskapen.

   ! DOCTYPE html> html> head> style> body {background-color: # 93B874; } h1 {bakgrundsfärg: orange; } p {bakgrundsfärg: rgb (255,0,0); } / style> / head> body> h1> Denna rubrik får en orange bakgrund / h1> p> Detta stycke får en röd bakgrund / p> / body> / html>

Metod 2 av 4: Använd en bild som bakgrund

1. Öppna HTML-filen i en textredigerare. Många föredrar att använda en bild som bakgrund för sin webbplats. Med detta kan du ställa in ett mönster, textur, foto eller någon annan bild som bakgrund. Från HTML5 måste alla bakgrunder ställas in med CSS (Cascading Style Sheets) i stil> / stil> taggar.
2. Lägg till stil> / stil> taggar till din HTML-fil. All stilinformation för din sida (inklusive bakgrundsfärgen) bör anges i dessa taggar. Har du redan stil> taggar, bläddra till den delen av filen.

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

3. Skriv "body" -elementet inuti stil> / stil> taggar. Allt du ändrar till "body" -elementet i CSS påverkar hela sidan.

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

4. Lägg till "bakgrundsbild" -egenskapen till "body" -elementet. När du lägger till den här egenskapen behöver du filnamnet på din bild. Se till att bilden sparas i samma mapp som html-filen (eller lägg till hela sökvägen till filen på din webbserver).

   ! DOCTYPE html> html> head> style> body {background-image: url ("imagename.png"); bakgrundsfärg: # 93B874; } / style> / head> body> / body> / html>

   • Det är en bra idé att inkludera koden bakgrundsfärg bara om bakgrundsbilden inte laddas.
5. Skikt flera bilder. Du kan stapla flera bilder ovanpå varandra. Detta kan vara användbart om du har bilder med genomskinliga bakgrunder som kompletterar varandra när de läggs över.

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

   • Den första bilden är överst. Den andra bilden är under den första.

Metod 3 av 4: Skapa en tonad bakgrund

1. Använd CSS för att skapa en tonad bakgrund. Om du letar efter något mer stiliserat än en solid färg, men inte så upptagen som en färganimering, prova en tonad bakgrund. Gradienter är färger som ändras till andra likheter. Du kan använda CSS för att skapa och justera din lutning. Innan du börjar skapa en färggradient bör du få tillräcklig kunskap om grunderna för att formatera en webbsida med CSS.
2. Förstå standardsyntaxen. När du skapar en lutning finns det två bitar av information du behöver: startpunkten och startvinkeln och färgerna mellan vilka övergången sker. Du kan välja flera färger som alla överlappar varandra och du kan ange en riktning eller en vinkel för lutningen.

   bakgrund: linjär gradient (riktning / vinkel, färg1, färg2, färg3, etc.);

3. Skapa en vertikal lutning. Om du inte anger en riktning kommer färgen att springa från topp till botten. Olika webbläsare har olika versioner av lutningsfunktionen, så du måste lägga till olika versioner av koden.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; / * Detta krävs för att säkerställa att lutningen spänner över hela sidan * /} body {bakgrund: -webkit-linjär-lutning (# 93B874, # C9DCB9); / * Chrome 10+, Safari 5.1+ * / bakgrund: -o-linjär-gradient (# 93B874, # C9DCB9); / * Opera 11.1+ * / bakgrund: -moz-linjär-gradient (# 93B874, # C9DCB9); / * Firefox 3.6+ * / bakgrund: linjär gradient (# 93B874, # C9DCB9); / * Standardsyntax (måste vara sist) * / bakgrundsfärg: # 93B874; / * Det är en bra idé att ställa in en bakgrundsfärg, om lutningen inte laddas * /} / stil> / huvud> kropp> / kropp> / html>

4. Skapa en lutning med en riktning. Genom att lägga till en riktning i lutningen kan du justera hur färgen förskjuts. Observera att olika webbläsare tolkar anvisningar på olika sätt. De kommer alla att visa samma färggradient.

   ! DOCTYPE html> html> head> style> html {min-height: 100%; } kropp {bakgrund: -webkit-linjär-gradient (vänster, # 93B874, # C9DCB9); / * från vänster till höger * / bakgrund: -o-linjär-gradient (höger, # 93B874, # C9DCB9); / * slut till höger * / bakgrund: -moz-linjär-gradient (höger, # 93B874, # C9DCB9); / * slut till höger * / bakgrund: linjär gradient (till höger, # 93B874, # C9DCB9); / * flyttar till höger sida * / bakgrundsfärg: # 93B874; / * det är en bra idé att ställa in en bakgrundsfärg, om lutningen inte laddas * /} / stil> / huvud> kropp> / kropp> / html>

5. Använd andra egenskaper för att justera lutningen. Du kan göra mycket mer med lutningar.
   • Du kan till exempel inte bara använda mer än två färger utan också placera en procentsats bakom var och en. Med detta kan du ange hur mycket utrymme varje färgsegment får.

     bakgrund: linjär gradient (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • Lägg till transparens i färgerna. Med detta kan du blekna färgerna. Använd samma färg för att blekna från färgen till ingenting. Du kommer att älska funktionen rgba () måste använda för att ange färgen. Slutvärdet avgör graden av transparens: 0 för ogenomskinlig och 1 för transparent.

     bakgrund: linjär gradient (till höger, rgba (147,184,116.0), rgba (147,184,116.1));

Metod 4 av 4: Ställ in en färganimering som bakgrund

1. Navigera till stil> i din HTML-kod. Om du hittar en fast bakgrundsfärg men inte, experimentera med att ändra färgbakgrund. Från HTML 5 måste bakgrundsfärger definieras med CSS (Cascading Style Sheets). Om du aldrig har ställt in en bakgrundsfärg med CSS, läs avsnittet om att ställa in en solid bakgrundsfärg innan du testar den här metoden.
2. Lägg till fastigheten animering till "kropp" -elementet. Du måste lägga till två olika egenskaper, eftersom varje webbläsare kräver olika kod.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s oändligt; animering: färgbyte 60-tal oändligt; } / style> / head> body> / body> / html>

   • -webkit-animation egenskapen krävs för Chrome-baserade webbläsare (Chrome, Opera, Safari). animering är standarden för alla andra webbläsare.
   • färgbyte är det som kallas animationen i detta exempel.
   • 60-talet är varaktigheten (60 sekunder) för animeringen / övergången. Se till att ställa in detta för både webbkit och standardsyntax.
   • oändlig indikerar att animationen ska upprepas på obestämd tid. Om du föredrar att slinga färgerna och sedan stanna vid den sista färgen kan du utelämna den här delen.
3. Lägg till färger i din animering. Nu ska du använda @keyframes-regeln för att ställa in bakgrundsfärgerna som ska gå igenom, samt hur länge varje färg kan ses på sidan. Återigen måste du lägga till flera kodningar för de olika webbläsarna.

   ! DOCTYPE html> html> head> style> body {-webkit-animation: colorchange 60s oändligt; animering: färgbyte 60-tal oändligt; } @ -webkit-keyframes colorchange {0% {bakgrund: # 33FFF3;} 25% {bakgrund: # 78281F;} 50% {bakgrund: # 117A65;} 75% {bakgrund: # DC7633;} 100% {bakgrund: # 9B59B6;}} @keyframes färgbyte {0% {bakgrund: # 33FFF3;} 25% {bakgrund: # 78281F;} 50% {bakgrund: # 117A65;} 75% {bakgrund: # DC7633;} 100% {bakgrund: # 9B59B6;}} / style> / head> body> / body> / html>

   • Observera att de två raderna (@ -webkit-keyframes och @keyframes har samma värden för bakgrundsfärger och procentsatser. Det bör förbli enhetligt så att upplevelsen förblir densamma för alla webbläsare.
   • Procentandelen (0%, 25%, etc.) representerar animationens totala varaktighet (60-talet). När sidan laddas in kommer bakgrunden att ha färgen inställd på 0% och (# 33FFF3). När 25% eller 60 sekunder av animationen har spelats övergår bakgrunden till # 78281F, och så vidare.
   • Du kan justera varaktighet och färger efter önskemål.