Så här ställer du in bakgrundsfärg i HTML

För att ställa in bakgrundsfärgen på en webbsida i HTML, gör bara en snabb ändring till elementet "kropp" inuti taggarna. Stegen att följa är lite annorlunda beroende på vilken effekt du vill uppnå. Lär dig hur du ställer in en färgfärg, bild, lutning eller flerfärgad animering som webbplatsens bakgrund.

Metod 1

Ange en enhetlig färg som bakgrund

Öppna HTML-filen med din favorit textredigerare. Med HTML5, HTML-attributet det stöds inte längre. Bakgrundsfärger, tillsammans med alla andra estetiska aspekter på sidan, ska hanteras med CSS.

Lägg till taggar i ditt dokument. All sidstilinformation (inklusive bakgrundsfärg) ska infogas mellan dessa taggar. Om du redan har skrivit in taggarna bläddrar du bara till den delen av filen.

Skriv objektet "kropp" inuti taggarna. Alla ändringar i objektet "kropp" I CSS påverkar de hela sidan.

Lägg till fastigheten "bakgrundsfärg" elementet "kropp".

Lägg till den färg du vill ha på fastigheten "bakgrundsfärg". Du kan skriva färgen med namn (,,, etc.), använd de hexadecimala koderna (hex) för att infoga tonen du föredrar (till exempel för svart, rött osv.) Eller skriv färgens RGB-värde (till exempel för gul). Här är ett exempel som använder sig av det hexadecimala uttrycket för att göra bakgrundsfärgen samma som wikiHow-bannern:

white:

Ljusrosa:

Burnt sienna land:

indigo:

Viola:

Besök sidan w3schools.com, HTML-färgväljaren, för att hitta de hexadecimala koderna för alla de vanligaste färgerna.

användning "bakgrundsfärg" att använda bakgrundsfärgen till de andra elementen. Precis som du lade till det här sökordet till kroppsdelen, kan du använda den för att definiera bakgrundsfärgen på andra delar av sidan. Ange de objekt som ska redigeras inom taggarna med egenskapen bakgrundsfärg.

Denna paragraf har en röd bakgrund

Metod 2

Använd en bild som bakgrund

Öppna HTML-filen med din favorit textredigerare. Många föredrar att använda bilder som bakgrund för sina webbplatser. Detta låter dig skapa bakgrunden med en design, ett mönster, ett foto eller någon annan typ av bild. Med HTML5 ska alla bakgrundstyper konfigureras med CSS (Cascading Style Sheets), inom taggar.

Skriv objektet "kropp" inuti taggarna. Alla ändringar i objektet "kropp" I CSS påverkar de hela sidan.

Lägg till fastigheten "bakgrundsfärg" elementet "kropp". När du är färdig behöver du bildnamnet. Kontrollera att filen är i samma mapp som HTML-sidan (annars måste du ange hela sökvägen för filen på webbservern).

Det är en bra idé att lägga till egenskapen ändå, om bilden inte är laddad.

Överla flera bilder. Du kan lägga flera bilder ovanpå varandra. Detta kan vara användbart om du har ritningar med en transparent bakgrund som är färdiga om de överlagras.

Den första bilden visas högst upp. Den andra bakom den första.

Metod 3

Skapa en bakgrund med Gradient

Använd CSS för att skapa en gradientbakgrund. Om du letar efter en stylistiskt effektivare lösning än en enkel solid färg, men inte så förvirrande som flerfärgade animeringar, prova den här typen av bakgrund. Gradienter är färger som blir till andra nyanser. Du kan använda CSS för att skapa och anpassa en. Innan du försöker, se till att du förstår grunderna i CSS.

Lär dig den grundläggande syntaxen. För att skapa en gradient behöver du två bitar av information: utgångspunkten eller vinkeln och färgerna som ska användas. Du kan välja flera färger så att gradienten passerar från en till en annan och du kan bestämma vilken riktning transformationen sker i.

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

Skapa en vertikal gradient. Om du inte anger någon riktning går graderingen från topp till botten. De olika webbläsarna implementerar denna funktion olika, så du måste inkludera mer än en version av koden.

Skapa en riktningsgradient. Genom att lägga till en riktning mot gradienten kan du ändra hur transformationen visas. Observera att de olika webbläsarna tolkar kommandona på olika sätt. Men alla producerar samma resultat.

Använd andra egenskaper för att konfigurera gradienten. Möjligheterna till ditt förfogande är många.

Till exempel kan du lägga till mer än två färger och välja procentandel av varje. Detta gör att du kan bestämma hur mycket utrymme du vill tilldela varje färgsegment.

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

Lägg till genomskinlighet i färger. Den här funktionen gör att de försvinna. Använd samma färg, definierad med funktionen, för att få sin nyans för att få fullständig öppenhet. Slutvärdet bestämmer insynen: för ogenomskinlig och för genomskinlig.

bakgrund: linjär gradient (till höger, rgba (147,184,116,0), rgba (147,184,116,1)) -

Metod 4

Ställ in en bakgrund som ändrar färg

Hitta taggen inuti HTML-koden. Om du inte gillar vanliga bakgrunder, försök experimentera med den här animerade och irriterande bakgrunden. Med HTML 5 måste bakgrundsfärger definieras i CSS (Cascading Style Sheets). Om du aldrig gjort det tidigare, läs Ställ in en enhetlig färg som bakgrund innan du försöker använda den här metoden.

Lägg till animeringsegenskapen till elementet "kropp". Du kommer att se två olika kommandon, specifika för de olika webbläsarna.

är egenskapen som ska användas på Chrome-baserade webbläsare (Chrome, Opera, Safari). det är standarden för alla andra webbläsare.

är namnet på animationen i det här exemplet.

är längden (60 sekunder) av animationen. Var noga med att ställa in den för båda koderna.

Ställ in animationen för att repetera kontinuerligt. Om du föredrar att färgerna bara ändras en gång innan du slutar på den sista nyansen, skriv inte in det här kommandot.

Välj animeringens färger. Nu ska du använda @keyframes-regeln för att ställa in bakgrundsfärgerna som ska användas i animeringen, samt hur länge varje tangent är. Också i detta fall krävs olika koder för de olika webbläsarna.

Observera att de två reglerna (e) har samma färger och procentsatser. Se till att parametrarna är identiska, så att upplevelsen är densamma på alla webbläsare.

Procentandelar (,, etc.) hänvisar till animationens totala varaktighet (). När sidan är laddad kommer bakgrunden att ha färgen inställd på (). Efter 25% av 60 sekunder blir bakgrunden och så vidare.

Du kan ändra tider och färger efter dina behov.

Dela på sociala nätverk:

Relaterade

Så här ställer du in bakgrundsfärg i HTML

steg

Metod 1

Metod 2

Metod 3

Metod 4