Opacity.

[jlizarraga]

Hi all,

You know how when you set a container to have 0 opacity, its child elements also become invisible regardless of their opacity setting? Is that the correct standard, or should an element be opaque when it its opacity is is 1 regardless of its parent container's opacity?

Reason I ask:

I'm developing an ajax app that does a lot of fading. Currently my app relies on the assumption that an element inherits its parent's opacity no matter what. There are main body and header areas which usually fade as a group, but once in a while a child or two will fade independently from the rest of the group. I want to make sure that an element with an inline opacity of 1 still fades when its parent fades (which it current does) in future browsers, too.

[Nile]

Looking at this code, it looks like it takes the opacity of its parent div:

<style type="text/css">
#parent {
  opacity: 0.5;
  height: 400px;
  width: 400px;
  background-color: green;
}
#child {
  opacity: 1;
  width: 200px;
  height: 200px;
  background-color: red;
}
</style>
<div id="parent">
  <div id="child">
  </div>
</div>

[jscheuer1]

The opacity style property isn't yet standard in current CSS (version 2), though it almost certainly will be in a future version. Probably in 3, it is already in the working draft for CSS 3.

So, since it is not yet documented as a standard, there is no way of being sure how it will behave.

That said, it looks to be inherited, like visibility, which is how it behaves in those browsers that do support it.

[jlizarraga]

Thanks guys!

[Twey]

It's nothing to do with the HTML standard. opacity is a CSS3 property, which standard is currently unfinished, but nevertheless certain parts of it have already gained wide support (mostly the bits that were already implemented in proprietary browser styles). It's unlikely that these parts will deviate much from the current implementations.

[salbahis]

i also have the same problem... is there any way around this?, i want my container to be transparent while the child container stay as non transparent....