Background-color
CSS vlastnost background-color určuje barvu pozadí.
| 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á.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| Internet Explorer | všechny verze | rgba() až od verze 9, #rrggbbaa vůbec |
| Firefox | všechny verze | |
| Opera | všechny verze | |
| Chrome | všechny verze |
RGBA poloprůhledná 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}
Střídání barvy pozadí v řádcích tabulky
tr:nth-child(even) {background-color: yellow;}
tr:nth-child(odd) {background-color: red;}
Příklad používá pseudotřídu nth-child s parametry even (sudá) a odd (lichá).
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.
Barevné přechody na pozadí
Barevné přechody jsou zvláštním typem obrázku, nikoli typem barvy. Přechody linear-gradient, radial-gradient a conic-gradient probírám u vlastnosti background-image (obrázek na pozadí).
Reklama
