Průhledný obsah v CSS

Používat úspěšně opacity je možné od Internet Exploreru 9; ve starších lze totéž simulovat filtrem.

.pruhledny {
  filter: alpha(opacity=50); /* 50 ze 100 = 50% průhlednost */
  opacity: 0.5; /* 0.5 z 1 = 50% průhlednost */
}

Vlastnost opacity nabývá hodnot od nuly do jedné:

• 0 – element je úplně průhledný (není vidět, ale na stránce překáží, tj. jako by se použilo visibility: hidden),
• 1 – element není vůbec průhledný (jako by se nic nenastavilo),
• 0.5 (popř. zkráceně .5) – element je průhledný z poloviny.

Pro Exploreří filter: alpha(opacity=X) je to podobné, jen hodnota rovnou v procentech.

Za elementem .pruhledny bude vykukovat (prosvítat) pozadí.

Nefunkční filter: alpha(opacity=50) v IE

Ve starších Explorerech (IE7) občas zprůhlednění přes vlastnost filter nemusí fungovat.

Starší IE totiž neumí aplikovat filtry na elementy, co nemají layout (hasLayout), řešení je prosté — layout zapnout — třeba vlastností zoom:

.pruhledny {
  zoom: 1; /* zapnutí hasLayoutu pro IE */ 
  filter: …
}

Průhledný obsah, neprůhledný text

Jak je vidět na předchozí ukázce, průhledné je úplně vše. Jelikož text není moc dobře čitelný, hodilo by se mít průhledný pouze obsah.

Průhledná barva — rgba(…)

Od IE9 se při zápisu barev dá použít zprůhlednění. (Ekvivalent rgba bez průhlednosti je rgb a funguje spolehlivě napříč prohlížeči.)

Barva se zadá čtyřmi parametry:

Následující elementy mají stejnou barvu, ale jinak nastavenou její průhlednost.

Nastavování barev dle průhlednosti se může hodit při návrhu webu, když se ještě neví, co bude jak přesně barevné. Nebo v případě, kdy chceme více barevných versí. Stačí určit barevné pozadí a jednotlivé barvy zadávat jako černou nebo bílou o určité průhlednosti. Když se potom přebarví pozadí, přebarví se tak i všechny průhledné barvy.

Absolutně posicovaný element s opacity

Druhá možnost, jak docílit průhledného pozadí bez průhledného textu, je si připravit samotný průhledný element a za text jej naposicovat a z-indexem přemístit za text (nutno dát pozor, aby se nedostal ještě níže než za požadovaný text – řešení je zvýšit z-index pro obal).

Výsledek by měl být v podporovaných prohlížečích totožný; v nepodporovaných, tj. IE8, IE7 apod., by na rozdíl od předchozího příkladu tato ukázka měla fungovat.

Průhledný obrázek

Další řešení výše uvedeného nebo jen řešení situace, kdy nestačí obyčejné jednobarevné pozadí, je vytvoření průhledného obrázku v grafickém editoru (příklad obrázku), který se nastaví jako pozadí (background).