Opaque image on a transparent background

[superdan_35]

I have recently changed the design of a site to incorporate a transparent background in div containers using the new CSS3 styles. The only problem is that any images I have within these div containers also become transparent.

 

The page in question is a div container with a table inside. The image (a jpeg with solid white background) is placed inside the table with a div of it's own for styling. I have tried setting opacity for the image div as well as background colours and images, none of which work. I have also tried to give the table cell a background colour.

 

Any ideas would be brilliant!

 

Thanks,

Dan

[haku]

An element cannot have an opacity higher than that of its parent. So if the parent has 50% opacity, then any elements inside that will only have 50% opacity, even if they are set to 100%.

 

To get around this, you can use a transparent background image for the container, instead of setting the opacity with CSS. You will have to use a pngfix script if you want it to work in IE6 though.

[superdan_35]

Thanks for the help. I have now used a background png and all is fixed. What would be the pngfix?

 

Dan

[Dorky]

#box { whatever: is whatever; }
#bg { position: absolute; width: 100%;  height: 100%; filter:alpha(opacity=20); opacity:0.2; }
img { whatever: wherever; }

<div id='box'><div id='bg'></div><img src='#' /></div>