Taustan värin vaihtaminen CSS: n avulla

Taustan värin vaihtaminen CSS: n avulla

Yksi jännittävimmistä hetkistä kehittyneen käyttöliittymän kehittäjän urassa on verkkosivun taustavärin muuttamisen oppiminen.





HTML: n kanssa työskentely on hienoa ja kaikkea, mutta vain muutamalla riviä CSS: ää voit saada sivusi ja ohjelmointimatkasi eloon.



Tämä opas kattaa kaiken, mitä sinun tarvitsee tietää taustavärin muuttamisesta CSS: llä.





Ota käyttöön

Lopetetaan pieni esityö.

miten pienennät valokuvan mb -kokoa?

Huomautus : Suosittelen käyttöä Visual Studio -koodi kanssa Live -palvelinlaajennus nähdäksesi muutokset reaaliajassa, kun päivität HTML- ja CSS-tiedostoja.



  1. Luo kansio projektisi tiedostoille.
  2. Luo index.html tiedosto HTML -koodisi tallentamiseksi. Voit käyttää kattilalevyn koodia tai vain määrittää joitakin , ja tunnisteita.
  3. Luo tyylejä. css tiedosto CSS: lle.
  4. Linkitä CSS -tiedostosi HTML -koodiin sijoittamalla sisällä tunnisteita.

Nyt olet valmis aloittamaan CSS: n muokkaamisen.

Aiheeseen liittyviä: Boilerplate -verkkosivuston luominen



Taustan värin vaihtaminen CSS: n avulla

Yksinkertaisin tapa muuttaa taustaväriä on kohdistaa vartalo tag. Muokkaa sitten taustaväri omaisuutta. Löydät värikoodit etsimällä ja käyttämällä Google Color Picker -selainlaajennusta

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

Tämä koodi muuttaa taustan mukavan vaaleansiniseksi.



The taustaväri omaisuus hyväksyy värit kuudessa eri muodossa:

  • nimi : valosininen; (lähentämiseksi)
  • hex -koodi : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); missä kohteeseen on alfa (opasiteetti)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); missä kohteeseen on alfa (opasiteetti)

Käytä lyhennettä tausta kiinteistö sen sijaan taustaväri leikata ylimääräistä koodia. Voit muuttaa minkä tahansa HTML -elementin taustaväriä tällä menetelmällä.

Luo elementti ja anna sille luokka - tässä tapauksessa luokka on paneeli . Aseta sen korkeus ja leveys ominaisuudet CSS: ssä. Valitse elementti CSS: ssä ja värit pois.

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

Täältä näet vartalo tausta ominaisuus on muotoiltu riippumatta .paneeli tausta omaisuutta.

Taustaominaisuus hyväksyy myös kaltevuudet:

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

Taustakuvan vaihtaminen CSS: ssä

Entä jos haluat taustan olevan kuva eikä yksivärinen tai kalteva? Lyhenne tausta omaisuus on tuttu ystävä.

Varmista, että kuva on samassa kansiossa kuin HTML- ja CSS -tiedostosi. Muussa tapauksessa sinun on käytettävä suluissa olevaa tiedoston polkua nimen sijasta:

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

Vau! Näyttää siltä, ​​että kuva on liian suurennettu. Voit korjata sen taustakoko omaisuutta.

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

Pikakirjoituksen käyttäminen tausta kiinteistö yhdessä taustakoko omaisuutta peite , sinun on myös määritettävä tausta-asema ominaisuudet ja erota arvot vinoviivalla (vaikka ne olisivat oletusasentoarvoja, kuten ylävasen .)

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

Ole hyvä! Oikean kokoinen taustakuva yhdellä CSS -rivillä.

Lue lisää: Taustakuvan asettaminen CSS: ään

Huomautus : Varo sisällyttämästä suuria taustakuvia, jotka vievät paljon tallennustilaa. Näiden lataaminen mobiililaitteille voi olla vaikeaa, sillä sinulla on kaksi sekuntia aikaa antaa käyttäjille syy pysyä sivulla.

Nosta CSS-pelisi CSS-laatikon avulla

Itsesi kaltaiselle kehittäjälle taustavärin ja taustakuvan ominaisuudet ovat vanhoja uutisia. Onneksi aina on jotain uutta opittavaa.

Kokeile tehostaa laatikoitasi CSS-laatikkovarjolla. HTML -elementtisi eivät ole koskaan näyttäneet paremmilta!

Jaa Jaa Tweet Sähköposti CSS-laatikon käyttäminen: 13 temppua ja esimerkkiä

Tyhjät laatikot näyttävät tylsiltä. Koristele ne CSS-laatikkovarjotehosteella!

Lue seuraava Liittyvät aiheet
  • Ohjelmointi
  • Verkkokehitys
  • Web-suunnittelu
  • CSS
Kirjailijasta Marcus Mears III(26 artikkelia julkaistu)

Marcus on elinikäinen tekniikan harrastaja ja MUOn kirjoittajaeditori. Hän aloitti freelance -kirjoittajauransa vuonna 2020 kattaen trenditekniikan, gadgetit, sovellukset ja ohjelmistot. Hän opiskeli tietojenkäsittelytiedettä korkeakoulussa ja keskittyi verkkokäyttöön.

Lisää Marcus Mears III: sta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi