Background-color

CSS vlastnost background-color určuje barvu pozadí.

background-color
hodnoty barva pozadí
barva barva vyplní pozadí celého prvku
transparent prvek bude průhledný
rgbA barva barva bude poloprůhledná, viz níže

Pokud je zároveň u téhož prvku nastaven obrázek na pozadí (background-image), pak obrázek barvu překryje. Průhledné části obrázku ale bude ta barva prosvítat; barva bude vidět také před natažením obrázku ze serveru.

Hodnota transparent je výchozí, nemusí se nastavovat. Používá se pro přetlučení nějaké barvy deklarované dříve.

Podpora

Všechny moderní prohlížeče barvu pozadí umějí. Je to velmi dobře podporovaná vlastnost, protože je prastará.

Podpora background-color
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer všechny verze rgba() až od verze 9
Firefox všechny verze  
Opera všechny verze  
Chrome všechny verze  

RGBA barva pozadí

RGBA je poloprůhledná barva, která se dá nastavit v moderních prohlížečích. Má smysl pouze tehdy, když pod prvkem je nějaký jiný prvek, který má trochu prosvítat. Zároveň z nějakých důvodů nejde použít vlastnost opacity (průhlednost). Stardardní zápis počítá s tím, že se do závorky přidá čtvrté číslo pro průhlednost. To A znamená alpha jako alpha kanál, což je označení pro průhlednost. Alpha se počítá od 0 do 1 -- čím vyšší, tím méně průhledná. Např. 0.1 znamená, že to bude velmi velmi průhledné. Hodnota 0 odpovídá hodnotě transparent. Hodnota 1 odpovídá zcela neprůhledné barvě.

Příklad zápisu poloprůhledné hnědé barvy pozadí odstavce:

p {background-color: rgba(128,0,0,0.5);}

Zápis rgb(128,0,0) by normálně odpovídal hnědé, ale protože je tam to a a čtvrtá hodnota, bude to poloprůhledné. Problém nastane u starších prohlížečů, např. Internet Explorer 8. Ten rgbA() barvy nepodporuje, takže je třeba mu předhodit nějakou zástupnou jinou, například nějakou světle hnědou.

p {background-color: rgb(192,128,128) /* světle hnědá */; background-color: rgba(128,0,0,0.5); }

Tenhle trik asi vyžaduje vysvětlení. První deklaraci s rgb zápisem znají všechny prohlížeče, i ty starší. Starší prohlížeče tuto barvu použijí, protože následující zápis rgbA barvy neznají, a tak jej ignorují. Novější prohlížeče druhé pravidlo s rgbA zápisem znají, a tak jej použijí namísto rgb, protože to rgbA je v kódu později. Obě deklarace tedy nelze prohodit, pak by to nebylo poloprůhledné ani v moderních prohlížečích!

Příklady

Odstavec <p> podbarvený červenou barvou zapsaný ve stylu:

p {background-color: red}

Červená barva pozadí zapsaná přímo v jednom odstavci v HTML zdroji:

<p style="background-color: red">obsah odstavce</p>

Barva pozadí se dá nastavit také souhrnnou vlastností background:

p {background: red}

S barvou pozadí pokud možno vždy nastavte i barvu písma. Nevíte totiž, jakou barvu písma má nastavenou klient. Kdyby měl nastavené červené písmo, bude červená na červené. Korektní zápis:

p {background-color: red; color: black}

Další příklady

Příklad sloupcového designu pozicováním (podbarvené sloupce).

Dvě třídy u jednoho prvku (primitivní background-color).

Různé barvy odkazů pomocí třídy.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.