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

Kapcsolódó bejegyzések:
  • Ha kíváncsi vagy hogy készítik az újságok elején gyakran látható “fotósopmacákat”, fusd át ezt a tutorialt. :) Egyébként a módszert szolidabban alkalmazva egész …

  • Egyre ritkábban ugyan, de még előfordul, hogy a HTML elkészítésekor a grafikusnak/designernek (esetleg magunknak :)) hála szeretnénk úgy PNG24-es képeket használ …

  • Gyakran felmerülő kérdés, hogy lehet egy dobozt absolute pozícionálással egy olyan lapszerkezetben elhelyezni, ahol a lap tartalma mindig középen van, tehát a do …

  • Néha 1-1 egyszerű művelettel is kellemes hatásokat lehet elérni – erre jó példa az alábbi leírás. 1.) Először is nyissunk meg egy képet, mint pl ez:2.) az …

  • Color: az adott elem színét adhatjuk meg vele. Pl.H1 { color: blue } H2 { color: #0000ff } H3 { color: #0c0 }Background Color: az adott elem háttérsz …

A cikket beküldte: Harder (http://blog.harder.hu)

6 hozzászólás

  1. Cooty says:

    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. ViZion says:

    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. mákvirág says:

    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. Harder says:

    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. mákvirág says:

    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. ViZion says:

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

Szólj hozzá
a CSS átlátszóság c. bejegyzéshez

- Engedélyezett HTML elemek: <a> <em> <strong> <ul> <ol> <li>
- Forráskód beküldéséhez tedd a kódot ezek közé: <pre lang="php" line="1">Kódrészlet helye itt</pre>