Průhledné pozadí rgba()
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.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Počítání v CSS funkcí calc()

Počítání v CSS pomocí calc()

Od Exploreru 9 a mimo starou Operu 12 lze přímo v CSS provádět jednoduché výpočty využitím calc().

CSS toggle()

CSS funkce toggle()

Nefunguje zatím snad nikde, měla by sloužit k pohodlnému zadávání hodnot pro zanořené elementy stejného názvu.

Proměnné v CSS

Proměnné v CSS – var()

Proměnné přímo v CSS přes funkci var().

CSS gradient

Gradienty v CSS

Jak vytvořit barevný přechod (gradient) přímo v CSS bez použití obrázku.

CSS counter

CSS counter

Automatické číslování v CSS za pomocí counter-increment, counter-reset a counter.

Komentáře