Vodič za boju pozadine HTML - Kako promijeniti boju pozadine za div, objašnjeno primjerima koda

Jedna od najčešćih stvari koje ćete možda morati učiniti kao web programer je promjena boje pozadine HTML elementa. Ali to može biti zbunjujuće ako ne razumijete kako koristiti background-colorsvojstvo CSS .

U članku raspravljamo

  • zadana vrijednost boje pozadine HTML elementa
  • kako promijeniti boju pozadine div-a, što je vrlo čest element
  • na koje dijelove CSS modela okvira utječe background-colorsvojstvo, i
  • različite vrijednosti koje ovo svojstvo može poprimiti.

Zadana boja pozadine elementa

Zadana boja pozadine div-a je transparent. Dakle, ako ne navedete boju pozadine div-a, prikazat će onu svog nadređenog elementa.

Promjena boje pozadine diva

U ovom ćemo primjeru promijeniti boje pozadine sljedećih div-ova.

 I love HTML I love CSS I love JavaScript 

Bez ikakvog stylinga, ovo će vizualno prevesti na sljedeće.

Promijenimo pozadinsku boju div-ova dodavanjem stilova u klase. Možete slijediti i isprobavanje primjera u HTML datoteci.

 .div-1 { background-color: #EBEBEB; } .div-2 { background-color: #ABBAEA; } .div-3 { background-color: #FBD603; } I love HTML I love CSS I love JavaScript 

To će rezultirati sljedećim:

Super! Uspješno smo promijenili boju pozadine ovog div-a. Dalje, upoznajmo više o ovom svojstvu. Pogledajmo kako svojstvo background-color utječe na dijelove CSS-box modela.

Boja pozadine i model CSS okvira

Prema modelu CSS okvira, svi HTML elementi mogu se modelirati kao pravokutni okviri. Svaka kutija sastoji se od 4 dijela kako je prikazano na donjem dijagramu.

Možete pročitati model kutije ako vam nije poznat. Pitanje je na koji dio modela okvira utječe kada promijenite boju pozadine div-a? Jednostavan odgovor je područje umetanja i područje sadržaja. Potvrdimo to na primjeru.

  body { background-color: #ABBAEA; } div { height: 200px; margin: 20px; border: 5px solid; background-color: #FBD603; } 

This is the parent div which contains the div we are testing

This example shows that changing the background color of a div does not affect the border and margin of the div.

To će rezultirati:

Iz gornjeg primjera vidimo da područje margine i pogranično područje ne utječu na promjenu boje pozadine. Boju obruba možemo promijeniti pomoću svojstva border-color. Područje margine ostaje prozirno i odražava boju pozadine nadređenog spremnika.

Na kraju, razgovarajmo o vrijednostima koje može imati svojstvo background-color.

Vrijednosti boje pozadine

Baš kao i svojstvo boje, svojstvo pozadine-boje može poprimiti šest različitih vrijednosti. Razmotrimo na primjeru tri najčešće vrijednosti. U primjeru smo boju pozadine div postavili na crvenu s različitim vrijednostima.

 /* Keyword value/name of color */ .div-1 { background-color: red; } /* Hexadecimal value */ .div-2 { background-color: #FF0000; } /* RGB value */ .div-3 { background-color: rgb(255,0,0); } 

The background property can take six different values.

The background property can take six different values.

The background property can take six different values.

Primijetite da svi rezultiraju istom bojom pozadine.

Ostale vrijednosti koje background-colorsvojstvo može uzeti uključuju HSL vrijednost, posebne vrijednosti ključnih riječi i globalne vrijednosti. Evo primjera svakog od njih.

/* HSL value */ background-color: hsl(0, 100%, 25%; /* Special keyword values */ background-color: currentcolor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: unset; 

Više o svakoj od ovih vrijednosti možete pročitati ovdje.

Dodatna napomena

Pri postavljanju boje pozadine elementa važno je osigurati da kontrast boje pozadine i boje teksta koji sadrži bude dovoljno visok. Time se osigurava da osobe s oštećenim vidom mogu lako čitati tekst.

Razmotrite ova dva div-a.

Kontrast između boje pozadine prvog div-a i boje teksta nije dovoljno visok da bi ga svi mogli vidjeti. Dakle, ako jedini ne koristite web stranicu koju gradite i ako imate vrlo dobar vid, trebali biste izbjegavati takve kombinacije boja.

Drugi div ima puno bolji omjer kontrasta između boje pozadine i boje teksta. Stoga je ljudima pristupačnije i jasnije čitati.

Zaključak

U ovom smo članku vidjeli kako možete promijeniti boju pozadine div-a. Također smo razgovarali o tome na koje dijelove CSS modela okvira utječe promjena boje pozadine. Na kraju smo razgovarali o vrijednostima koje svojstvo pozadine boja može poprimiti.

Nadam se da vam je ovaj članak bio koristan. Hvala na čitanju.