Hvordan endre bakgrunnsfarge med CSS

Hvordan endre bakgrunnsfarge med CSS

Et av de mest spennende øyeblikkene i enhver spirende front-end-utviklers karriere er å lære å endre bakgrunnsfargen på en webside.





Å jobbe med HTML er flott og alt, men med bare noen få linjer med CSS kan du få sidene dine og programmeringsreisen til å blomstre til liv.



Denne guiden vil dekke alt du trenger å vite om hvordan du endrer bakgrunnsfarge med CSS.





Sett deg opp

La oss slå ut et lite forarbeid.

hvordan importere sanger fra ipod til itunes

Merk : Jeg anbefaler å bruke Visual Studio -kode med Live Server -utvidelse for å se endringer i sanntid mens du oppdaterer HTML og CSS.



  1. Lag en mappe for prosjektets filer.
  2. Lag en index.html fil for å huse HTML -koden din. Du kan bruke kokerplate -kode, eller bare sette opp noen , , og tagger.
  3. Lage en styles.css filen for CSS.
  4. Koble CSS -filen til HTML -koden ved å plassere den inne i tagger.

Nå er du klar til å begynne å redigere CSS.

I slekt: Slik oppretter du en kjeleplate



Hvordan endre bakgrunnsfarge med CSS

Den enkleste måten å endre bakgrunnsfargen er ved å målrette mot kropp stikkord. Rediger deretter bakgrunnsfarge eiendom. Du kan finne fargekoder ved å søke etter og bruke nettleserutvidelsen Google Color Picker

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

Denne koden endrer bakgrunnen til en fin lyseblå.



De bakgrunnsfarge eiendommen godtar farger i seks forskjellige former:

  • Navn : lightskyblue; (for en nær tilnærming)
  • hex kode : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); hvor til er alfa (opacity)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); hvor til er alfa (opacity)

Bruk stenografi bakgrunn eiendom i stedet for bakgrunnsfarge for å kutte ekstra kode. Du kan endre hvilken som helst HTML -elements bakgrunnsfarge ved å bruke denne metoden.

Lage en element og gi den en klasse - i dette tilfellet er klassen panel . Sett sitt høyde og bredde eiendommer i CSS. Velg elementet i CSS og fargelegg.

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 kropp bakgrunn eiendommen er stylet uavhengig av .panel bakgrunn eiendom.

Bakgrunnsegenskapen godtar 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%);
}

Slik endrer du bakgrunnsbildet i CSS

Hva om du vil at bakgrunnen skal være et bilde i stedet for en ensartet farge eller gradient? Stenografien bakgrunn eiendom er en kjent venn.

Sørg for at bildet er i samme mappe som HTML- og CSS -filene. Ellers må du bruke filbanen inne i parentesen i stedet for bare navnet:

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

Whoah! Det ser ut til at bildet er alt for zoomet inn. Du kan fikse det med bakgrunnsstørrelse eiendom.

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

For å bruke stenografien bakgrunn eiendom i forbindelse med bakgrunnsstørrelse eiendom dekke , må du også spesifisere bakgrunn-posisjon egenskaper og skille verdiene med en skråstrek (selv om de er standard posisjonsverdier som øverst til venstre .)

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

Der går du! Et bakgrunnsbilde i riktig størrelse i en linje med CSS.

Les mer: Hvordan sette et bakgrunnsbilde i CSS

Merk : Vær forsiktig med å inkludere store bakgrunnsbilder som tar mye lagringsplass. Disse kan være tøffe å laste på mobil, der du har alle to sekunder på å gi brukerne en grunn til å bli på siden.

Opp ditt CSS-spill med CSS-skygge

For en utvikler som deg selv er bakgrunnsfarge og bakgrunnsbildeegenskaper gamle nyheter. Heldigvis er det alltid noe nytt å lære.

Prøv å gi boksene et løft med CSS box-shadow. HTML -elementene dine har aldri sett bedre ut!

Dele Dele kvitring E -post Slik bruker du CSS box-shadow: 13 triks og eksempler

Blandede bokser ser kjedelige ut. Piff dem opp med CSS-skyggeeffekten!

Les neste Relaterte temaer
  • Programmering
  • Webutvikling
  • Webdesign
  • CSS
Om forfatteren Marcus Mears III(26 artikler publisert)

Marcus er en livslang teknologientusiast og forfatterredaktør ved MUO. Han startet sin freelance -skrivekarriere i 2020, og dekket trendteknologi, gadgets, apper og programvare. Han studerte informatikk på college med fokus på front-end webutvikling.

Mer fra Marcus Mears III

Abonner på vårt nyhetsbrev

Bli med i vårt nyhetsbrev for tekniske tips, anmeldelser, gratis ebøker og eksklusive tilbud!

Klikk her for å abonnere