Kako spremeniti barvo ozadja s CSS

Kako spremeniti barvo ozadja s CSS

Eden najbolj vznemirljivih trenutkov v karieri naprednih razvijalcev je učenje, kako spremeniti barvo ozadja spletne strani.





Delo s HTML -jem je odlično in vse, toda samo z nekaj vrsticami CSS -ja lahko svoje strani in svojo programsko pot oživite.



Ta priročnik bo zajemal vse, kar morate vedeti, kako spremeniti barvo ozadja s CSS.





Namestite se

Zapustimo malo predhodnega dela.

kako se blokirate na spletnem mestu

Opomba : Priporočam uporabo Koda Visual Studio z Razširitev strežnika v živo za ogled sprememb v realnem času, ko posodabljate HTML in CSS.



  1. Ustvarite mapo za datoteke svojega projekta.
  2. Ustvarite index.html datoteko za shranjevanje HTML -ja. Uporabite lahko kodo načrta ali pa jo nastavite , , in oznake.
  3. Ustvariti styles.css datoteko za vaš CSS.
  4. Povežite datoteko CSS z HTML tako, da jo postavite znotraj oznake.

Zdaj ste pripravljeni, da začnete urejati CSS.

Povezano: Kako ustvariti spletno stran kotlovnice



Kako spremeniti barvo ozadja s CSS

Najpreprostejši način spreminjanja barve ozadja je ciljanje na telo oznaka. Nato uredite datoteko Barva ozadja lastnine. Barvne kode lahko najdete tako, da poiščete in uporabite razširitev brskalnika Google Color Picker

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

Ta koda spremeni ozadje v lepo svetlo modro.



The Barva ozadja lastnina sprejema barve v šestih različnih oblikah:

  • ime : lightkyblue; (za bližnji približek)
  • šestnajstiška koda : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); kje do je alfa (motnost)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); kje do je alfa (motnost)

Uporabite stenografijo ozadje lastnine namesto Barva ozadja za izrezovanje dodatne kode. S to metodo lahko spremenite barvo ozadja katerega koli elementa HTML.

Ustvariti element in mu dajte razred - v tem primeru je razred ploščo . Nastavi svoje višina in premer lastnosti v CSS. Izberite element v CSS in odstranite barvo.

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

Tukaj si lahko ogledate telo ozadje lastnina je oblikovana neodvisno od .panel ozadje lastnine.

Lastnost ozadja sprejema tudi gradiente:

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

Kako spremeniti sliko ozadja v CSS

Kaj pa, če želite, da je ozadje slika in ne enobarvna ali preliv? Stenografija ozadje lastnina je znan prijatelj.

Poskrbite, da je slika v isti mapi kot datoteke HTML in CSS. V nasprotnem primeru boste morali namesto imena uporabiti pot do datoteke v oklepajih:

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

Vau! Videti je, da je slika preveč povečana. To lahko popravite z velikost ozadja lastnine.

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

Za uporabo stenografije ozadje nepremičnine v povezavi s velikost ozadja lastnine ovitek , morate tudi določiti položaj ozadja lastnosti in ločite vrednosti s poševnico (tudi če so privzete pozicijske vrednosti, npr zgoraj levo .)

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

Izvolite! Slika velikosti ozadja v eni vrstici CSS.

Preberi več: Kako nastaviti sliko ozadja v CSS

Opomba : Bodite previdni pri vključevanju velikih slik v ozadju, ki zavzamejo veliko prostora za shranjevanje. Te je težko naložiti na mobilno napravo, kjer imate na voljo vse dve sekundi, da uporabnikom navedete razlog, da ostanejo na strani.

Nadgradite svojo igro CSS s senco polja CSS

Za razvijalca, kot ste vi, sta barva ozadja in slika slike ozadja stara novica. Na srečo se je vedno treba kaj novega naučiti.

Poskusite povečati svoje škatle s senco polja CSS. Vaši elementi HTML nikoli niso izgledali bolje!

Deliti Deliti Cvrkutati E-naslov Kako uporabljati CSS box-shadow: 13 trikov in primerov

Mehke škatle izgledajo dolgočasno. Popestrite jih z učinkom sence škatle CSS!

Preberite Naprej Sorodne teme
  • Programiranje
  • Spletni razvoj
  • Oblikovanje spletnih strani
  • CSS
O avtorju Marcus Mears III(26 objavljenih člankov)

Marcus je vseživljenjski tehnološki navdušenec in pisatelj urednik v MUO. Svojo samostojno pisateljsko kariero je začel leta 2020 in zajemal trendno tehnologijo, pripomočke, aplikacije in programsko opremo. Študiral je računalništvo na fakulteti s poudarkom na spletnem razvoju.

Več od Marcus Mears III

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite