Áttetszőség beállítása
október 6, 2009 @ 23:30
No, itt van talán az egyik legegyszerűbben alkalmazható CSS 3 technika, az egyes objektumok áttetszőségének beállítása. Sok design-elem épít az egyes komponensek részleges átlátszóságára, hiszen ez a térhatás kialakításának az egyik egyszerű és látványos módja.
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
- ne csak előre legyártott .png képeket tehessünk áttetszővé
- 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 
Surbma — 2009. október 12. hétfő @ 10:31
Ez a cikk akkor lenne hasznos, ha mélyebben írnád le ezeket a tulajdonságokat. Például hiányzik a hover effekt is, amikor egy képre mozgatva az egeret teljesen látható lesz.
Nekem az a problémám, hogy az oldal hátterét állítottam be áttetszőnek és ez hatással van az összes többi tagra is. Hogyan lehet megoldani, hogy a áttetsző legyen, de a benne lévő tagok már ne örököljék ezt a tulajdonságot?
Köszönöm a segítséget!
admin — 2009. október 12. hétfő @ 19:31
Hogyan állítottad be az oldal hátterét áttetszőnek? Ha úgy, hogy a body tag opacity-t csökkentetted, akkor az nemcsak a háttérre, hanem a teljes body tagre, magyarul az oldal összes elemére vonatkozik.
Ha készítesz egy wrapper div-et, ami a teljes oldalt magába foglalja, valahogy így:
[body]
[div id="wrapper"]
[!--oldal tartalma--]
[/div]
[/body]
és utána beállítod, hogy
#wrapper {
opacity: 1;
}
akkor elvileg csak a body background lesz áttetsző, minden más pedig nem, mert ők már a #wrapper-től öröklik az áttetszőséget. Azért használtam []-t a >< helyett, mert külöben a Wordpress html-nek nézi és nem jeleníti meg.
Azt mondjuk nem tudom, hogy pont az “oldal háttere” miért kellene áttetsző legyen, hiszen a mögött nincs más mint maga a böngésző. Úgyhogy ha rosszul értettem a kérdést, akkor várom a kiigazítást
Surbma — 2009. október 13. kedd @ 08:04
Ez így nem megy, mivel az opacity az egyetlen olyan tulajdonság, amit minden elem örököl és nincs override sem.
DE! Van megoldás. A trükk, hogy nem benne van, hanem külön elemként, aztán position tulajdonságokkal összehozzuk őket.
Amit meg akartam oldani és meg is oldottam, hogy van az oldalnak egy háttere, középen a tartalom alatt pedig egy “üveglap” van, aminek áttetszőnek kell lennie, hogy látszódjon a háttér, de a tartalom ne örökölje ezt a tulajdonságot. Ezt gyönyörűen meg is oldottam, ami működik IE7/IE8/FF/Safari/Chrome böngészőkben is.
Itt az oldal: http://spiritplaza.hu
admin — 2009. október 13. kedd @ 08:17
Örülök, hogy sikerült megoldani. Nagyon tetszetős a weboldal. Gratulálok!
toldigabor — 2011. május 6. péntek @ 13:04
És ha adok egy doboznak egy fehér hátteret és azt akarom, hogy emögött látszon valamennyire a BODY háttere, azt meg lehet csinálni?