Sådan ændres baggrundsfarven med CSS

Sådan ændres baggrundsfarven med CSS

Et af de mest spændende øjeblikke i enhver spirende front-end udviklers karriere er at lære at ændre baggrundsfarven på en webside.





At arbejde med HTML er fantastisk og det hele, men med få CSS -linjer kan du få dine sider og din programmeringsrejse til at blomstre.



Denne vejledning dækker alt, hvad du har brug for at vide om, hvordan du ændrer baggrundsfarven med CSS.





Få sat op

Lad os slå et lille forarbejde ud.

hvordan man laver et iso -billede af windows 7

Bemærk : Jeg anbefaler at bruge Visual Studio -kode med Live Server udvidelse for at se ændringer i realtid, mens du opdaterer HTML og CSS.



  1. Opret en mappe til dit projekts filer.
  2. Opret en index.html fil til at huse din HTML. Du kan bruge kogepladekode, eller bare konfigurere noget , , og mærker.
  3. Lave en styles.css fil til din CSS.
  4. Link din CSS -fil til HTML -koden ved at placere den inde i mærker.

Nu er du klar til at komme i gang med at redigere CSS.

Relaterede: Sådan opretter du en kedelpladewebsted



Sådan ændres baggrundsfarven med CSS

Den enkleste måde at ændre baggrundsfarven på er ved at målrette mod legeme tag. Rediger derefter baggrundsfarve ejendom. Du kan finde farvekoder ved at søge efter og bruge Google Color Picker -browserudvidelsen

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

Denne kode ændrer baggrunden til en flot lyseblå.



Det baggrundsfarve ejendommen accepterer farver i seks forskellige former:

  • navn : lightskyblue; (for en tæt tilnærmelse)
  • hex -kode : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); hvor til er alfa (opacitet)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); hvor til er alfa (opacitet)

Brug stenografien baggrund ejendom i stedet for baggrundsfarve at skære ekstra kode. Du kan ændre ethvert HTML -elements baggrundsfarve ved hjælp af denne metode.

Lave en element og giv det en klasse - i dette tilfælde er klassen panel . Indstil dens højde og bredde ejendomme i CSS. Vælg elementet i CSS og farvelæg.

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;
}

Her kan du se legeme baggrund ejendommen er indrettet uafhængigt af .panel baggrund ejendom.

Baggrundsejendommen accepterer også gradienter:

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

Sådan ændres baggrundsbilledet i CSS

Hvad hvis du vil have baggrunden til at være et billede frem for en ensfarvet eller gradient? Stenografien baggrund ejendom er en kendt ven.

Sørg for, at billedet er i den samme mappe som dine HTML- og CSS -filer. Ellers bliver du nødt til at bruge filstien inde i parentesen i stedet for bare navnet:

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

Hov! Det ser ud til, at billedet er alt for zoomet ind. Du kan løse det med baggrundsstørrelse ejendom.

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

At bruge stenografien baggrund ejendom i forbindelse med baggrundsstørrelse ejendom dække over , skal du også angive baggrund-position egenskaber og adskille værdierne med en skråstreg (selvom de er standardpositionsværdier som f.eks øverst til venstre .)

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

Værsgo! Et baggrundsbillede i korrekt størrelse i en linje med CSS.

Læs mere: Sådan indstilles et baggrundsbillede i CSS

Bemærk : Vær forsigtig med at inkludere store baggrundsbilleder, der optager meget lagerplads. Disse kan være svære at indlæse på mobilen, hvor du har alle to sekunder til at give brugerne en grund til at blive på siden.

Op dit CSS-spil med CSS-skygge

For en udvikler som dig selv er baggrundsfarven og baggrundsbilledegenskaberne gamle nyheder. Heldigvis er der altid noget nyt at lære.

Prøv at give dine kasser et boost med CSS box-shadow. Dine HTML -elementer har aldrig set bedre ud!

Del Del Tweet E -mail Sådan bruges CSS box-shadow: 13 tricks og eksempler

Blandede kasser ser kedelige ud. Pift dem op med CSS box-shadow-effekten!

Læs Næste Relaterede emner
  • Programmering
  • Web-udvikling
  • Webdesign
  • CSS
Om forfatteren Marcus Mears III(26 artikler udgivet)

Marcus er en livslang teknologientusiast og forfatterredaktør på MUO. Han begyndte sin freelance forfatterkarriere i 2020 og dækkede trendende teknologi, gadgets, apps og software. Han studerede datalogi på college med fokus på front-end webudvikling.

Mere fra Marcus Mears III

Abonner på vores nyhedsbrev

Tilmeld dig vores nyhedsbrev for at få tekniske tips, anmeldelser, gratis e -bøger og eksklusive tilbud!

Klik her for at abonnere