Kako promijeniti boju pozadine pomoću CSS -a

Kako promijeniti boju pozadine pomoću CSS -a

Jedan od najuzbudljivijih trenutaka u karijeri naprednih programera je učenje kako promijeniti boju pozadine web stranice.





Rad s HTML -om je izvrstan i sve, ali sa samo nekoliko redaka CSS -a možete oživjeti svoje stranice i svoje programsko putovanje.



Ovaj vodič će pokriti sve što trebate znati o tome kako promijeniti boju pozadine pomoću CSS -a.





Postavite se

Izbacimo mali preliminarni rad.

kako poslati privatnu poruku u aplikaciji youtube

Bilješka : Preporučujem korištenje Kôd Visual Studija sa Proširenje poslužitelja uživo za pregled promjena u stvarnom vremenu dok ažurirate HTML i CSS.



  1. Izradite mapu za datoteke vašeg projekta.
  2. Napravite index.html datoteku za smještaj vašeg HTML -a. Možete upotrijebiti predznak ili ga samo postaviti , , i oznake.
  3. Stvoriti stilovi.css datoteku za svoj CSS.
  4. Povežite svoju CSS datoteku s HTML -om postavljanjem unutar oznake.

Sada ste spremni za početak uređivanja CSS -a.

Povezano: Kako stvoriti web stranicu bojlera



Kako promijeniti boju pozadine pomoću CSS -a

Najjednostavniji način promjene boje pozadine je ciljanje tijelo označiti. Zatim uredite datoteku boja pozadine imovine. Kodove boja možete pronaći pretraživanjem i upotrebom proširenja preglednika Google Color Picker

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

Ovaj kôd mijenja pozadinu u lijepo svijetloplavu boju.



The boja pozadine nekretnina prihvaća boje u šest različitih oblika:

  • Ime : lightkyblue; (za blisku aproksimaciju)
  • heksadecimalni kod : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); gdje do je alfa (neprozirnost)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); gdje do je alfa (neprozirnost)

Upotrijebi stenografiju pozadini nekretnina na mjestu boja pozadine za rezanje dodatnog koda. Ovom metodom možete promijeniti boju pozadine bilo kojeg HTML elementa.

Stvoriti element i dajte mu klasu - u ovom slučaju klasa je ploča . Postavite svoj visina i širina svojstva u CSS -u. Odaberite element u CSS -u i uklonite boju.

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

Ovdje možete vidjeti tijelo pozadini nekretnina je stilizirana neovisno o .ploča pozadini imovine.

Svojstvo pozadine također prihvaća gradijente:

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

Kako promijeniti pozadinsku sliku u CSS -u

Što ako želite da pozadina bude slika, a ne jednobojna ili gradijentna? Stenografija pozadini imanje je poznati prijatelj.

Provjerite je li slika u istoj mapi kao i vaše HTML i CSS datoteke. U suprotnom ćete morati koristiti put do datoteke unutar zagrada, a ne samo naziv:

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

Vau! Čini se da je slika previše zumirana. To možete popraviti pomoću pozadine imovine.

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

Da se poslužim stenografijom pozadini imovine zajedno s pozadine imovine pokriti , morate također navesti background-position svojstva i odvojite vrijednosti obrnutom kosom crtom (čak i ako su zadane pozicijske vrijednosti, npr gore lijevo .)

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

Izvoli! Pozadinska slika odgovarajuće veličine u jednom retku CSS -a.

Čitaj više: Kako postaviti pozadinsku sliku u CSS -u

Bilješka : Budite oprezni pri uključivanju velikih pozadinskih slika koje zauzimaju puno prostora za pohranu. To može biti teško učitati na mobitelu, gdje imate sve dvije sekunde da date korisnicima razlog da ostanu na stranici.

Poboljšajte svoju CSS igru ​​pomoću CSS box-shadow

Za programera poput vas, svojstva pozadinske boje i slike pozadine stara su vijest. Srećom, uvijek se može nešto novo naučiti.

Pokušajte svojim kutijama dati pojačanje pomoću CSS box-shadow. Vaši HTML elementi nikada nisu izgledali bolje!

Udio Udio Cvrkut E -pošta Kako koristiti CSS box-shadow: 13 trikova i primjera

Blage kutije izgledaju dosadno. Oplemenite ih s CSS box-shadow efektom!

Pročitajte Dalje Povezane teme
  • Programiranje
  • Web razvoj
  • Web dizajn
  • CSS
O autoru Marcus Mears III(26 objavljenih članaka)

Marcus je doživotni entuzijast u tehnologiji i pisac urednik u MUO -u. Svojom slobodnom spisateljskom karijerom započeo je 2020. godine, pokrivajući trendovsku tehnologiju, gadgete, aplikacije i softver. Studirao je informatiku na fakultetu s fokusom na front-end web razvoj.

Više od Marcusa Mearsa III

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu