Průhlednost

Některé formáty (GIF, PNG) podporují průhlednost. To vám umožňuje, aby částmi obrázku prosvítalo pozadí stránky. Díky tomu lze vytvářet obrázky s nepravidelnými obrysy (například nápisy, kde vše kromě písmen je průhledné).

GIF

Průhlednost v GIFu je realizována naprosto triviálně: jedna barva z palety je prohlášena za průhlednou. Všechny ostatní jsou neprůhledné. Jednodušší už to být nemůže.

Riziko se skrývá v kombinaci s vyhlazováním hran (antialiasing). Při něm jsou u oblých a šikmých linií hraniční pixely vytvořeny smícháním barvy objektu (třeba písma) a barvy pozadí. Pokud ale takový obrázek posadíte na pozadí, jehož tón se výrazně liší od původního, vzniknou duchové:

Nápis byl v grafickém editoru vytvořen na bílém pozadí a následně byla bílá prohlášena za průhlednou. Jenže na okrajích se nacházejí světle růžové pixely, jež průhledné nejsou. Při umístění na světlé pozadí to nevadí. Jakmile se ale obrázek ocitne na tmavém pozadí, bude obklopen prapodivnou světlou aureolou a vypadá katastrofálně. Ještě daleko příšernější by bylo, kdybyste mu vrhli stín.

Jak řešit tento problém? Možnosti jsou v zásadě tři:

• Vytvářet obrázky na stejném pozadí, na němž budou později umístěny. Je-li pozadí stránky tmavě modré, musí se obrázky vytvářet také na tmavě modrém pozadí. Komplikací může být, když chcete pozadí měnit (prostřednictvím uživatelské volby z několika stylů, jejichž barva pozadí se významně liší).

• Vypnout antialiasing. Obrázek je pak použitelný na libovolném pozadí, ale zase má zubaté okraje:

• Použít PNG.

PNG

Ve formátu PNG je průhlednost vyřešena daleko lépe. Existuje tu tak zvaný alfa kanál, který rozlišuje 256 úrovní průhlednosti – od bodů zcela průhledných až po zcela neprůhledné. Vyrobíte jej celkem snadno: vytvořte obrázek v grafickém editoru na průhledném pozadí a následně uložte ve formátu PNG se zapnutou průhledností.

Zde je antialiasing vytvořen nikoli mícháním barvy pozadí s barvou obrázku, ale vhodným nastavením průhlednosti u okrajových pixelů – například že pixel je červený s průhledností 50 %. Míchání barev pak zajistí až klient, a to v závislosti na skutečné barvě pozadí stránky. Obrázek pak vypadá dobře na libovolném pozadí (včetně vzorovaného, jehož barvy se mění):

Starší verze MS Internet Exploreru měly se zobrazováním průhlednosti v PNG problém. Pokud byste potřebovali, aby vaše stránky dobře zobrazoval i MSIE verze 8 a starší (kterých je dnes mezi uživateli jako šafránu), můžete použít následující kličku.

Jedná se o tak zvaný soubor s definicí chování (behavior file), jehož prostřednictvím lze MSIE „doučit“ některé věci, například právě podporu alfa kanálu v PNG. Je třeba si stáhnout soubor definující chování a do CSS předpisu (o CSS bude řeč ve druhé části kursu) zařadit nestandardní pravidlo

behavior: url(pngbehavior.htc)

Toto pravidlo je specifické pro MSIE a neodpovídá definici CSS. Pokud necháte zkontrolovat syntaktickou správnost svého stylového předpisu, způsobí chybu.