css - 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/