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 — 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.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.