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

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