RGBA
Author
Albert FloresRGBA je zkratka pro barevný model, který se používá k popisu barev v počítačích. Tento model kombinuje tři primární barvy - červenou (R), zelenou (G) a modrou (B), spolu s průhledností (A). Tím umožňuje vyjádřit širší rozsah barev a také různé úrovně průhlednosti. Každá z těchto složek může mít hodnotu mezi 0 a 255, kde 0 znamená nejmenší intenzitu dané barvy a 255 největší intenzitu. RGBA je často používána v digitální grafice, web designu a v mnoha dalších aplikacích, kde je potřeba zobrazovat různé barevné odstíny s různou průhledností.
Barevný model RGBA používá aditivní způsob míchání barev a vychází z modelu RGB, který je rozšířen o tzv. alfa kanál A s informací o průhlednosti konkrétního pixelu. Alfa kanál má vždy týž počet polotónů, jako každý z kanálů R/G/B (je-li sytost R/G/B určena 1 Bytem = 8 bity (= 28 = 256 úrovní sytosti), pak je alfa kanál určen rovněž 8 bity (připouští 256 stupňů průhlednosti).
Tento barevný model je využit u obrázků ve formátu PNG.
element { background: rgba(255, 255, 255, 0. 5); } První tři parametry (v rozsahu 0-255) jsou intensity červené (r), zelené (g) a modré (b) barvy. +more Čtvrtý parametr je alpha - neprůhlednost. Neprůhlednost se zadává v rozmezí 0-1, nulu před desetinnou tečkou je možné vypustit, tj. „0. 5“ je totéž co „. 5“. Nula značí kompletní průhlednost, jednička značí kompletní neprůhlednost.
Tento způsob nastavování barvy funguje od IE 9, pro starší prohlížeče existuje jednoduchý fallback, kdy se podobná barva, ale bez neprůhlednosti, zadá před tu průhlednou. element { background: gray; /* pro IE 8 a starší */ background: rgba(255, 255, 255, 0. +more5); }.
Proč průhledné barvy?
Kromě vytváření průhledného obsahu existuje ještě jeden důvod. Vhodným kombinováním:
* průhledné černé - rgba(0, 0, 0, .5) * a průhledné bílé - rgba(255, 255, 255, .5)
Je možné vytvořit barvy typu „o trochu tmavší/světlejší“. Celá stránka potom jde přebarvit na jednom místě - na pozadí. Ostatní elementy se relativně přizpůsobí.
IE 8 a starší
Pro podporu v IE 8 a starších je možné použít například gradient filtr (se stejnou počáteční i koncovou barvou), kterému se dá nastavit průhlednost (určují ji první dva znaky barvy).
Zesvětlení
filter: progid:DXImageTransform.Microsoft.gradient( GradientType=0, startColorstr='#4cffffff', endColorstr='#4cffffff' )
Ztmavení
filter: progid:DXImageTransform. Microsoft. +moregradient( GradientType=0, startColorstr='#4c000000', endColorstr='#4c000000' ) Nesmí se zapomenout, že IE 9 podporuje filtry i rgba, takže by se efekt při současném použití zdvojil. Nabízí se tedy průhledný filtr připojit s využitím podmíněných komentářů jen pro IE 8.