Výukový program pre farbu pozadia HTML - Ako zmeniť farbu pozadia Div, vysvetlené v príkladoch kódu

Jednou z najbežnejších vecí, ktoré ako webový vývojár možno budete musieť urobiť, je zmena farby pozadia prvku HTML. Môže to byť však mätúce, ak nerozumiete tomu, ako používať vlastnosť CSS background-color.

V článku diskutujeme

  • predvolená hodnota farby pozadia prvku HTML
  • ako zmeniť farbu pozadia div, čo je veľmi častý prvok
  • - ktoré časti modelu poľa CSS sú ovplyvnené background-colorvlastnosťou a -
  • rôzne hodnoty, ktoré môže mať táto vlastnosť.

Predvolená farba pozadia prvku

Predvolená farba pozadia div je transparent. Pokiaľ teda nezadáte farbu pozadia div, zobrazí sa farba jeho nadradeného prvku.

Zmena farby pozadia div

V tomto príklade zmeníme farby pozadia nasledujúcich prvkov div.

 I love HTML I love CSS I love JavaScript 

Bez akéhokoľvek úpravy to bude vizuálne znamenať nasledujúci text.

Zmeňme farbu pozadia prvkov div tým, že do tried pridáme štýly. Môžete pokračovať tým, že vyskúšate príklady v súbore HTML.

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

Výsledkom bude:

Super! Úspešne sme zmenili farbu pozadia tejto div. Ďalej sa dozvieme viac o tejto vlastnosti. Pozrime sa, ako vlastnosť farba pozadia ovplyvňuje časti modelu CSS-box.

Farba pozadia a model CSS Box

Podľa modelu škatule CSS je možné všetky prvky HTML modelovať ako obdĺžnikové škatule. Každé políčko sa skladá zo 4 častí, ako je znázornené na obrázku nižšie.

Ak nie ste oboznámení s modelom krabice, môžete si ho prečítať. Otázkou je, ktorá časť krabicového modelu je ovplyvnená, keď zmeníte farbu pozadia divu? Jednoduchá odpoveď je oblasť polstrovania a oblasť obsahu. Potvrdíme to na príklade.

  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.

Výsledkom bude:

Z vyššie uvedeného príkladu vidíme, že okrajová oblasť a hraničná oblasť nie sú ovplyvnené zmenou farby pozadia. Farbu orámovania môžeme zmeniť pomocou vlastnosti border-color. Okrajová oblasť zostáva priehľadná a odráža farbu pozadia nadradeného kontajnera.

Na záver si povieme, aké hodnoty môže mať vlastnosť color-color.

Hodnoty farby pozadia

Rovnako ako vlastnosť color môže mať vlastnosť color-color šesť rôznych hodnôt. Uvažujme na príklade troch najbežnejších hodnôt. V príklade sme nastavili farbu pozadia div na červenú s rôznymi hodnotami.

 /* 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.

Všimnite si, že všetky majú rovnakú farbu pozadia.

Medzi ďalšie hodnoty, ktoré môže background-colorvlastnosť brať, patria hodnoty HSL, špeciálne hodnoty kľúčových slov a globálne hodnoty. Tu sú príklady každého z nich.

/* 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; 

O každej z týchto hodnôt si môžete prečítať viac tu.

Extra poznámka

Pri nastavovaní farby pozadia prvku je dôležité zabezpečiť, aby bol kontrastný pomer farby pozadia a farby textu, ktorý obsahuje, dostatočne vysoký. To má zabezpečiť, aby ľudia so slabým zrakom mohli text ľahko prečítať.

Zvážte tieto dva prvky.

Kontrast medzi farbou pozadia prvého dielu a farbou textu nie je dostatočne vysoký na to, aby to každý videl. Pokiaľ teda nie ste jediný, kto používa webovú stránku, ktorú budujete, a máte veľmi dobrý zrak, mali by ste sa takýmto farebným kombináciám vyhnúť.

Druhá časť má oveľa lepší kontrastný pomer medzi farbou pozadia a farbou textu. Pre ľudí je teda prístupnejšie a čitateľnejšie.

Záver

V tomto článku sme videli, ako môžete zmeniť farbu pozadia prvku div. Diskutovali sme tiež o tom, na ktoré časti modelu poľa CSS má zmena farby pozadia vplyv. Nakoniec sme diskutovali o hodnotách, ktoré môže mať vlastnosť farba pozadia.

Dúfam, že vám bol tento článok užitočný. Vďaka za prečítanie.