Problems Using Opacity

[dog]

Hello,

I'm trying to use opacity in CSS.

I've got a container with an opacity setting, opacity: 0.8; and i've also defined, filter: alpha(opacity=0.8); for IE. The problem is everything contained within this div seems to inherit the opacity.

I only want the background of the containing div to have this opacity and for the other elements to show up as normal.

I've tried giving the objects inside the container opacity: 1; but this doesn't seem to have any effect.

Can anyone help?

dog

[mwinter]

This has been asked before, though solving it isn't pretty for IE versions prior to 7. See the thread A way to make the background color of a div transparent, but not the text color.

Mike

[dog]

Hi Mike

Thanks for the advise. I've read the thread a few times over now.

So, the solusion being suggested is to use a translucent image to define the background rather than using an ocapity value for the whole div.

Is that right?

I've already tried and rejected using an image because watching it load was ugly in IE. I used a 2x2 pixel gif where half of the pixels where transparent.

I don't know how to make a translucent png. Is it simple?

Would using a png make any difference to the appearance of the loading?

I understand this following question may have been covered in the thread but I found some of the terminology hard to grasp...

Why doesn't this work?

CSS:

<style>
#container0 {
  filter:alpha(opacity=80);
  opacity: 0.8;
}
#container1 {
  filter:alpha(opacity=100)
  opacity: 1;
}
</style>

<div id="container0">
  <div id="container1">
    ---content---
  </div>
</div>

[mwinter]

So, the solusion being suggested is to use a translucent image to define the background rather than using an ocapity value for the whole div.

Is that right?

It's an option, yes. Supporting MSIE is quite a pain, here.

I don't know how to make a translucent png. Is it simple?

Yes, but as I wrote, only IE 7 supports alpha transparency natively.

Would using a png make any difference to the appearance of the loading?

I don't know. It depends what made it ugly for you with a GIF. Until the image is loaded, the background colour would be used.

Why doesn't this work?

CSS:

<style>
#container0 {
  filter:alpha(opacity=80);
  opacity: 0.8;
}
#container1 {
  filter:alpha(opacity=100)
  opacity: 1;
}
</style>

<div id="container0">
  <div id="container1">
    ---content---
  </div>
</div>

It's simply how the opacity property is defined: it applies to all descendants of the element and cannot be "reversed", as it were.

Mike