CSS átlátszóság

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

Hugyecz Görgy (Harder)
20+ éve munkám és hobbim is az online világhoz köt. Az utóbbi 10+ évben leginkább keresőopimalizálás (SEO) témában tevékenykedem, mellette pedig Google Ads és Facebook PPC fronton is segítem ügyfeleimet. Korábban 10+ évig webgrafika, sitebuild, weboldal készítés témakörben mozogtam.

6 HOZZÁSZÓLÁS

  1. 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?

  2. 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… :)

  3. 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!

  4. 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.

  5. 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.

  6. !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)…

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét