Zápis průhledné barvy `rgba()`

Zadávání barev v CSS pomocí rgba() umožňuje vytvořit průhledné jednobarevné pozadí.

23. května 2014

3 minuty

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

Světlý obsah

Tmavy obsah

Něco mezi

Samostatná ukázka.

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'
)

Ukázka pro IE 8

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.