Opacity inheritance

[Raffles]

I'm all for opacity being inherited by default, but I don't understand why it's done forcefully without the possibility of breaking the inheritance.

For instance:

<div>
  <p>Text</p>
  <div>
     <ol>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
    </ol>
  </div>
</div>

If the outer DIV is given an opacity of 0.4, it will affect all its contents. If I then give, say, the OL an opacity of 0.8 it ends up having an opacity of 0.4*0.8. Do you think this is the way it should be, or should the OL's opacity of 0.8 be more opaque than the outer DIV's 0.4?

[ParkinT]

I see your point and have dealt with the frustration generated by CSS issues like this one.

I could argue, though, that since the OL is a child of the DIV it is correct (from an inheritance point of view) to BEGIN at 0.4.
Afterall, could you not apply opacity of 2.0 to the OL; achieving and ultimate 0.8?

[Paul O'B]

Hi,

I'm all for opacity being inherited by default,

Actually the specs show that opacity isn't inherited at all in the normal sense. What happens when opacity is applied is that the element and its children are drawn onto the page then opacity is applied as whole to that "image". This is why you can't suddenly apply opacity to an inner element because its background will already be opaque and therefore appying more opacity at that stage will just increase the opacity.

As the range is 0 - 100 you can't apply any values greater than this to return the inner element to its normal opacity. I agree with you that it would be a good idea to do this but the way that it has been designed does not allow for this.

Unless you are using IE of course

In IE you can set the inner element to have position:relative and the opacity of that element returns to 100%.

.outer{
    background:red;
    opacity:0.4;
  filter: alpha(opacity=50);
    width:100%
}
ol {
    background:red;
    width:100%;
    position:relative
}

You have to restate the background colour of course for the inner element because backgrounds are not inherited and just adding position:relative would do nothing to the background unless you add one.

In short if you want inner elements not to be opaque then you would need to use transparent pngs in background images to achieve this effect.

[Raffles]

I could argue, though, that since the OL is a child of the DIV it is correct (from an inheritance point of view) to BEGIN at 0.4.

Yes, that does make sense, that's what I meant by inheritance.

Afterall, could you not apply opacity of 2.0 to the OL; achieving and ultimate 0.8?

I suppose that could work... 200% of the current inherited value, as long as the result is not more than 100% of what the "outer" possible opacity level is.

In IE you can set the inner element to have position:relative and the opacity of that element returns to 100%.

That sounds more like a bug! Though potentially a useful "feature" of IE's.

That's interesting about how opacity works, being applied to the "image" after it's drawn rather than to the elements in a more DOM-like fashion. Thanks for that tidbit, Paul.

[Paul O'B]

That sounds more like a bug! Though potentially a useful "feature" of IE's.

Well most of Ie's behaviour is buggy and whether or not they meant it to happen is another question.

I suppose that could work... 200% of the current inherited value, as long as the result is not more than 100% of what the "outer" possible opacity level is.

No that cannot work as the only values allowed for opacity are 0 - 100. As the child element has already in effect been rendered with its opacity set at whatever level then 100% will refer to the current level for this element which in effect means no change.