Så här ändrar du bakgrundsfärgen med CSS

Så här ändrar du bakgrundsfärgen med CSS

Ett av de mest spännande ögonblicken i någon spirande front-end-utvecklares karriär är att lära sig att ändra bakgrundsfärgen på en webbsida.



Att arbeta med HTML är fantastiskt och allt, men med bara några rader med CSS kan du få dina sidor och din programmeringsresa att blomma ut till liv.





Den här guiden kommer att täcka allt du behöver veta om hur du ändrar bakgrundsfärgen med CSS.





Sätt igång

Låt oss slå ut lite förarbete.

saker att ladda ner på en ny dator

Notera : Jag rekommenderar att du använder Visual Studio -kod med Live Server -tillägg för att se ändringar i realtid när du uppdaterar HTML och CSS.



  1. Skapa en mapp för projektets filer.
  2. Skapa en index.html fil för att hysa din HTML. Du kan använda pannkodskod, eller bara ställa in en del , , och taggar.
  3. Skapa en styles.css fil för din CSS.
  4. Länka din CSS -fil till HTML genom att placera inuti taggar.

Nu är du redo att börja redigera CSS.

Relaterad: Hur man skapar en pannplatta -webbplats





Så här ändrar du bakgrundsfärgen med CSS

Det enklaste sättet att ändra bakgrundsfärgen är genom att rikta in kropp märka. Redigera sedan bakgrundsfärg fast egendom. Du kan hitta färgkoder genom att söka efter och använda webbläsartillägget Google Color Picker

body {
background-color: rgb(191, 214, 255);
}

Denna kod ändrar bakgrunden till en fin ljusblå.





De bakgrundsfärg fastigheten accepterar färger i sex olika former:

  • namn : lightskyblue; (för en nära approximation)
  • hex -kod : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); var till är alfa (opacitet)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); var till är alfa (opacitet)

Använd stenografin bakgrund egendom i stället för bakgrundsfärg att klippa av extra kod. Du kan ändra alla HTML -elements bakgrundsfärg med denna metod.

Skapa en element och ge den en klass - i det här fallet är klassen panel . Ställ in sin höjd och bredd fastigheter i CSS. Välj elementet i CSS och färga bort.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

Här kan du se kropp bakgrund fastigheten är utformad oberoende av .panel bakgrund fast egendom.

Bakgrundsegenskapen accepterar också lutningar:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

Hur man ändrar bakgrundsbilden i CSS

Vad händer om du vill att bakgrunden ska vara en bild snarare än en fast färg eller toning? Kortfattningen bakgrund fastigheten är en bekant vän.

Se till att bilden finns i samma mapp som dina HTML- och CSS -filer. Annars måste du använda sökvägen inom parentes snarare än bara namnet:

body {
background: url(leaves-and-trees.jpg)
}

Oj! Det verkar som om bilden är alldeles för inzoomad. Du kan fixa det med bakgrundsstorlek fast egendom.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

För att använda stenografin bakgrund egendom i samband med bakgrundsstorlek fast egendom omslag måste du också ange bakgrund-position egenskaper och separera värdena med ett snedstreck (även om de är standardpositionsvärden som t.ex. övre vänstra .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

Varsågod! En bakgrundsbild i rätt storlek i en rad CSS.

Läs mer: Så här ställer du in en bakgrundsbild i CSS

Notera : Var försiktig med att inkludera stora bakgrundsbilder som tar mycket lagringsutrymme. Dessa kan vara svåra att ladda på mobilen, där du har alla två sekunder på dig att ge användarna en anledning att stanna kvar på sidan.

Upp ditt CSS-spel med CSS-skugga

För en utvecklare som dig själv är bakgrundsfärg och bakgrundsbildegenskaper gamla nyheter. Lyckligtvis finns det alltid något nytt att lära sig.

Prova att ge dina lådor ett lyft med CSS box-shadow. Dina HTML -element har aldrig sett bättre ut!

Dela med sig Dela med sig Tweet E-post Hur man använder CSS box-shadow: 13 knep och exempel

Blandade lådor ser tråkiga ut. Piffa upp dem med CSS-skuggaeffekten!

Läs Nästa
Relaterade ämnen
  • Programmering
  • Webbutveckling
  • Webbdesign
  • CSS
Om författaren Marcus Mears III(26 artiklar publicerade)

Marcus är en livslång teknikentusiast och Writer Editor på MUO. Han inledde sin frilansande skrivarkarriär 2020 och täckte trendteknik, prylar, appar och programvara. Han studerade datavetenskap på college med fokus på front-end webbutveckling.

Mer från Marcus Mears III

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera