How to keep text opacity 100 when its parent container is having opacity of 50

Question

I have a list div which have a opacity set to 50 and inside this div I want to display some text with opacity 100,

Here's what I mean:

<div id="outer">   <div id="inner">     Text   </div> </div> 

The CSS would be:

#outer {   opacity: 0.5; }  #inner {   opacity: 1.0; } 

I tried that, but it doesn't work.

please help

Regards

Answer 1

A simple and compatible solution is to remove all your opacity, and use:

#outer {     background: url(50%-transparent-white.png);     background: rgba(255,255,255,0.5) } 

• Browsers that support rgba will use the second background declaration with rgba.
• Browsers that do not will ignore the second background declaration and use the .png.

_{The .png won't work in IE6, but that's unlikely to be a problem. If it is, it can be resolved.}

---

Yet another method is detailed here:

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/