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.
Originally Posted by Raffles
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%.
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.