Opacity Problem

[hexdj]

/*CSS*/

.wrapper { background:url(bg.gif) top right;}

.gallery {color:#0033cc; filter: alpha(opacity=92); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=92); -moz-opacity:0.92; opacity:0.92;}

<!-- HTML -->

<div class=wrapper>
<div class=gallery>
<p>some text here and there</p>
<img src="tmb1.gif" width="125" height="125" border="0">
</div>
</div>

As you see I am trying to use opacity to fade a little bit of my background image, as long as I only have text on my gallery section it looks good, but the problem is that my image thumbnails listed in my gallery become transparent too. Is there any way to fix this? I can't take the images out of my "gallery" class because they need to be together with the text that looks good only while inside that class too.

Thanks!

[hexdj]

I read in other sites that opacity is inherited by all of the children of the element that it is applied to. Even though the Mozilla website claims that the -moz-oppacity propietary selector is not inherited, this is false.

Anyway, I would appreciate if someone could tell me if there's a Javascript algorithm that would make an image partially transparent. I could do this with CSS by replacing the background image, but this does not seem like an efficient solution since the background for all my pages will be the same, except that the background color on for each of my pages will be different. Too many different files to download for every section = bandwith waste.

Thanks!

[swa66]

I'd try to use translucent png-s and forget about the proprietary extensions such as filter and the -moz suite.

IE6 will have issues with png-s, I didn't try yet with IE7.

[Ingolemo]

The Mozilla website is correct; the opacity is not inherited. The reason that you get the effect you do is because opacity applies to the whole of the element and not just it's background; child elements are considered part of their parent. If opacity did inherit then you'd have every element getting less and less visible the deeper they were nested.

What you're looking for is not opacity but alpha transparency. As swa66 suggests, you could use alpha pngs (they will work in IE7 and there are suitable workarounds for IE6).