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

css html opacity

Moksha · Jun 22, 2011 · Viewed 39.6k times · Source

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

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: