Kezdetben volt ugye a .gif, amivel az áttetszőséget megoldani próbáltuk. Aki használta már az tudja, hogy elég sok kívánnivalót hagy maga után: egy képpont vagy átlátszó vagy nem, azaz opacity = 100% vagy opacity = 0%, középút nincs. Ha viszont azt szeretnénk, hogy az objektum élethűen legyen átlátszó, szükségünk van az átmenetekre. A .png erre nagyon jó megoldás, mert engedi a részleges áttetszőséget, de az IE6 sajnos alapból nem támogatja. Szerencsére remek megoldások vannak a .png áttetszőség megtanítására az IE6-nak, de ez még mindig nem az igazi. Mi lenne, ha volna olyan megoldás, amely lehetővé tenné, hogy

1. ne csak előre legyártott .png képeket tehessünk áttetszővé
2. akkkor is áttetszővé tehessünk egy – nem csak .png formátumú – képet, ha erre nem a kép készítésekor, hanem csak utólag gondolunk

Ezekre ad megoldást a CSS 3 rém egyszerű szabálya, az opacity. Nem kell mást tennünk, mint megadnunk egy 0 és 1 közötti számot, ami az áttetszőség százalékos értéke lesz. 1 az egyáltalán nem áttetsző, 0 pedig az annyira áttetsző, hogy már nem is látszik.

img {
    opacity: .9;
}

Hogy lássuk működés közben, gyorsan összedobtam egy képet, ami akár egy website menüje is lehetne. De ahelyett, hogy egyben mentettem volna el – vagy külön a menüt és a hátteret, de .png-ben – két .jpg fájlt készítettem, ami önmagában nem támogatja az áttetszőséget. Az egyiket a másikra helyeztem és 90%-os opacity-t állítottam be. Az eredmény itt látható. A menü mögött feltűnik egy kicsit a háttér, pedig a menü .jpg fájl teljesen átlátszatlan. Aki nem hiszi, járjon utána: töltse le a menü képét (jobb klikk a menün, save as…) és nyissa meg egy képnézegető programmal. Ez persze csak a példa fájlra vonatkozik, mert itt, a poszt bélyegképén nem CSS 3 megoldást alkalmaztam, hogy a nem kompatibilis böngészőkkel rendelkezők is láthassák, miről is írok.

Végül néhány szó a támogatásról. A WebKit és a Gecko a fent leírt formában támogatja, tehát a Chrome, a Safari és a Firefox tudja. A Konqueror KHTML motorja is támogatja, de -khtml-opacity néven. Az Internet Explorernek saját módszere van, már az 5.5-ös verizótól kezdve, ami ráadásul változott a 8-as verzióval, de ennek ismertetése meghaladja a poszt kereteit