Az opacity tulajdonságot a w3c a második css specifikációban vezette be, viszont csak a CSS3-ban lett tökéletes. Én Firefox1.0.2, Mozilla1.7.5 böngészõkön teszteltem.
Az általános szintaxis az opacity: 0.5;, ahol a 0.5 az átlátszóság mértéke és ez 50%-os átlátszóságot jelent.
Mozillánál az 1.6-os verziószám alatt a -moz-opacity:0.5; szintaxist kell használni.
Az ie a filter:alpha(opacity=50); szintaxist használja, értelemszerûen az 50 az 50%.
Opacity-nél és -moz-opacity-nél a gyermek elemek öröklik a szülõ elem átlátszóságát. Filter:alpha(opacity=50)-nél ha a position tulajdonság relative akkor nem öröklõdik az átlátszóság.
És akkor nézzünk is egy példát:
A css része:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* Egy doboz háttérrel */ #bg { width: 400px; height: 400px; background: url(kep.png) repeat; } /* Az átlátszó terület */ #transparent { width: 300px; margin: 0 50px; background: #ffffff; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; } |
És a html rész:
1 2 3 | <div id="bg"> <div id="transparent">Ide Jön valami szöveg;</div> </div> |
Hát körülbelül ennyi. Egész hasznos dolog szerintem. Használjátok egészséggel!
Rendo
Helló!
1) Annyit szeretnék hozzáfűzni, hogy némi hekkeléssel működik IE alatt is a css átlátszóság:
annyi az egész hogy “#selector{opacity:06}” helyett az IE-nek szánt CSS-be “#slector{filter:alpha(opacity=60)}”-at írunk, nekem ez IE7 és IE6 alatt is gond nélkül működik.
2) Van viszont egy olyan problémám, hogy nem tudom, hogy kell kikapcsolni az öröklődését.
Azaz van egy div-em amit elláttam a fenti opacity:0.6 szabállyal, és minden benne lévő cucc szintén átlátszó lesz, holott én nem akarom hogy azok legyenek. – Megpróbáltam, hogy azoknak megadtam külön, hogy opactiy:1 ,de nem működött – tudtok valami megoldást, mi lehet a hiba?
Tudunk-e megoldást? Talán. Csak tipp, mert nem próbáltam.
Ha fordítva adnád meg? A div-en belüli átlátszónak szánt elemek kapjanak saját id-t, és azokra írj átlátszóságot. Ez annyira nyilvánvaló, hogy szerintem próbáltad… :)
Ha az nem műxik, a másik lehetőség az important, ha azt is megadod a nem átlátszó elemeknek, akkor is érvényes az öröklődés? Elvileg az important felülírja, de mivel nem próbáltam, nem merem állítani, hogy jó a megoldás.
Mi lehet a hiba? Az, hogy a cégeknek azért kell a szabvány, hogy legyen mitől eltérni… :)
Sziasztok!
Sajnos eléggé “műveletlen” vagyok css terén, ugyanakkor jelenleg pont egy ilyesmi átlátszóságra lenne szükségem. A gondom az, hogy van egy táblázat, amit egy php kód generál. A táblázatnak van egy háttérszíne, és a cellákban a tartalom. A gondom csak annyi, hogy ha a táblázat átlátszóságát állítom pl. 50%-ra, akkor a benne megjelenő szöveges tartalom átlátszósága is 50%os lesz, de úgy szeretném, hogy csak a háttér legyen 50%-ban átlátszó, a szöveg pedig ne. Nem tudom ezt a problémát, hogy lehetne elkerülni, esetleg hova kellene id azonosítokat elhelyeznem, hogy a kívánt megjelenést érjem el, ebben szeretnék segítséget kérni. :) Köszi előre is!
Ne a táblázatnak addj 50%-os átlátszóságot, hanem a táblázatban szereplő td hátterének állítsd be.
Az a baj, hogy a -ben adom meg a háttérszín értékét, ezért itt szeretném beállítani a pl. az 50%os átlátszódást, aztán a -kben, ahol a szövegek lesznek, ott pedig teljesen megjelenne a szöveg, vagyis 100% értékkel. Tehát, ha a fenti példát vesszük, van két azonosító a bg és a transparent (az esetemben ugyanígy két egymásba ágyazott azonosító, az egyik a table-ben, a másik a td tagok után). A bg kap egy értéket (50%-ot), akkor a td-t hiába állítom 1-re, akkor is csak a bg értékben szereplő 50%os áttetszőséggel jelenik meg. Ezt az öröklődést szeretném valahogy elkerülni. A fenti példát értem és az működik is, hiszen az áttetsző terület a belső azonosítót kapja, így ezzel ott elkerültük az öröklődést.
!important -al esetleg?
Vagy van egy másik megoldás: transzparens png-t használj háttérnek, és akkor nem kell az opacity-vel babrálni, persze ez IE7+ tól műxik, de ez a legkényelmesebb (szerintem)…