How do you add different opacities to nested items?

Question

I have two nested items in HTML and I want to give the wrraping one opacity 0.8 and the one inside it opacity 1.
I think I understand why it does not work, but, how can

Answer 1

Using CSS2

I fiddled a demo for you that illustrates a key concept:

http://jsfiddle.net/audetwebdesign/pN69F/

You can start by adding a wrapper div to position your two enclosed div's, outer and inner. The outer comes before the inner, which means that the inner will sit over the outer (unless you adjust the z-index values).

You can set the opacity to the outer div and that will allow any background text or image to be partly visible. Set the opacity of the inner div to 1.0 to get fully saturated coloring.

I think most browsers support opacity, but check out http://www.quirksmode.org/css/opacity.html for vendor-specific CSS properties to handle IE quirks.