RGBA
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. Čtvrtý parametr je alpha — průhlednost. Prů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
“.
Tento způsob nastavování barvy funguje od IE 9, pro starší prohlížeče existuje jednoduchý fallback, kdy se podobná barva, ale bez průhlednosti, zadá před tu průhlednou.
element {
background: gray; /* pro IE 8 a starší */
background: rgba(255, 255, 255, 0.5);
}
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.gradient(
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.