Css opacity

hoi, ik heb even dit gemaakt:

<style type="text/css">
#badge {
background-image:url(url);
width: 606px; 
height: auto;
-moz-border-radius: 4px;
    border-radius: 4px;

}#badge2 {
background-color: #656565;
width: 604px; 
height: auto;
border: 1px solid #2f2f2f;
-moz-border-radius: 4px;
    border-radius: 4px;
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
}
#badgeimg {
margin: 5px;
background-color: #2f2f2f;
width: 52px;
height: 52px; 
border: 1px solid #000;
-moz-border-radius: 4px;
    border-radius: 4px;
opacity:0.8;
filter:alpha(opacity=80); /* For IE8 and earlier */
}
img
{
position:absolute;
}
</style>
<div id="badge">
<div id="badge2">
<div id="badgeimg">
<img src="http://habboemotion.com/resources/images/badges/SGD.gif" />
</div>
</div></div>
</body>
</html>

maar nu wil ik dat de afbeelding tussen de Afbeelding niet beschikbaarDe oorspronkelijke afbeelding of link ontbreekt. tag geen opacity heeft, in mijn html editor doet deze code het uitstekend. maar in firefox niet. Raar...

Iemand die weet hoe het moet Ik heb dus geprobeerd met position: absolute; en dat werkt niet. heb ook al wet geprutst met z-index en dat werkt ook niet. Hopelijk kan iemand mij helpen

Alles dat binnen de opacity staat (in dit geval #badge2) krijgt gewoon die opacity. Daar kan je niks aan doen.

Enige dat je kan doen is absolute positionering gebruiken waardoor de child-div (in dit geval jouw image) buiten zijn parent-div (#badge2) staat. Dan heeft de opacity geen effect op de image.

Zie hier een voorbeeld:
http://stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children

oke, ikzal die tut is goed doornemen want ik snap er nu niets van

Maak gewoon een extra div zonder die opacity en zet daar die image in, dan is het ook opgelost volgens mij?

maar die img is al zonder opacity, dus denk niet dat het gaat werken

Kijk dan naar mijn link. Daar staat gewoon een demo en uitleg in het engels van hoe je het kan fixen.f

ja het het lukt me tot ik er een andere div in plaats
toevoeging op 8 januari 2012, 14:25:35:
Gelukt heb net hetzelfde gedaan van die container2 voor de andere div thx Rik!