Průhlednost je cool, stejně jako zaoblené rohy, obrovské Web 2.0 písmo, AJAX a vše další. Pokud vám nic z toho cool nepřijde a za ideální stránku považujete takovou, která vypadá stejně ve Firefoxu nebo v Lynxu, tak nečtěte dál – Lynx průhlednost neumí. Čistě teoreticky není na průhlednosti nic zvláštního, CSS zná vlastnost opacity, kde 1=> úplně viditelný a 0 => úplně transparentní (pozor, že tuto vlastnost nezná třeba Opera 8). IE zná pro změnu filtr alpha, kde udáváte to samé, jenom v procentech a obráceně, tedy 0 => úplně viditelný, 100 => úplně transparentní  (tohle je samozřejmě nesmysl, obráceně to není). Takže úplně základní příklad 50% průhlednosti průhlednosti dostanete takto:

<p id="opaque">Lorem Ipsum</p>
#opaque {
   background-color: #FF3300;
   opacity: .5;
   /* použito kvůli kompatibilitě se staršími verzemi Firefoxu a Mozilly */
   -moz-opacity: .5;
   filter:alpha(opacity=50);
}

Výsledek:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Takto definovaná průhlednost má ale jednu zásadní vadu – dědí se na všechny podřízené prvky. Takže pokud budete chtít mít průhledné pozadí a hezky čitelný text, tak máte smůlu, nejde to. Nepomůže nastavit podřízený prvek zpět na úplně viditelný, přidat !important (klidně i se spoustou dalších vykřičníků), nepomůže nic.

Řešením je přidat do kódu jeden nesémantický prvek a trochu si pohrát s pozicováním prvků. Řekněme, že má jít o jednu položka menu (tohle řešení jde ale samozřejmě použít pro i cokoliv jiného), text bude tedy obalen tagem <a>. Před něj přidáme jeden prázdný div, který bude plnit funkci pozadí a bude mít nastavenou průhlednost. Z něj se logicky na odkaz průhlednost nezdědí, protože odkaz není jeho podřízený prvek. Zbývá už jenom vyřešit překrytí obou prvků. Jako první mě napadlo absolutní pozicování uvnitř relativně pozicovaného prvku (více například u Pixyho), kdy nadřazenému prvku nastavíme position: relative a rozměry. Podřízené prvky (prázdný <div> a odkaz) jsou potom absolutně pozicované na levý horní roh a mají stejnou výšku a šířku jako rodičovský prvek.

Výsledný dokument včetně ukázky pro 0%, 25%, 50% a 75% průhlednost jak na celém bloku včetně textu, tak jenom na pozadí si můžete prohlédnout zde (otevře se v novém okně). Postup funguje ve všech moderních prohlížečích – vyzkoušel jsem IE5.5, IE6 a IE7, Firefox 2 (měl by ale fungovat i pro starší verze), Operu 9 a Safari 3.

Odpovědi k “Průhlednost pomocí CSS”
  1. Průhlednost v CSS napsal:

    Díky, a to moc. Pomohlo mi vyřešit problém. Paráda.

  2. Dobry napsal:

    Dobrý, zrovna jsem to potřebuju řešit. Rychlý a jasný. Díky

  3. [...] nedávnem jsem psal návod na vytvoření průhledného pozadí pomocí CSS. Později mě napadlo přidat i způsob, jak měnit průhlednost při najetí myší, už jenom [...]

  4. ledo napsal:

    JJ taky jsem to využil.) U bloků např divu bych doporučoval přidat parametr width: 100% – Jde o kompatibilitu s IE ;) Nebo klasicky vytvořit např. ve photoshopu obr 5×5 který bude mít průhlednost 50% a uložit ho jako PNG. Přidat ho jako pozadí divu a je to.

  5. Pruhledne i pismo napsal:

    Problém je, že tady bude průhledné i písmo použité v dobjektu :( Je to vidět i na ukázce. Takže tímto způsobem neřešitelné :(

  6. Láďa napsal:

    ledo: PNG s alfakanálem bohužel nebude fungovat v IE6, jinak by věci jako stíny apod. byly řešitelné mnohem snadněji.
    Pruhledne i pismo: Doporučuji dočíst do konce.

  7.  
Zanechej komentář

K zanechání komentáře ke článku musíte být přihlášen. Přihlásit »