CSS: if is used opacity on DIV, everything inside is lighter

Question

I have a structure like this:

<div class="abc">
  <ul>
    <li>something</li>
    ...
  </ul>
</div>

I need to apply on the abc div an opacity option. If I do it, it works, but the text inside <ul> has opacity as the abc DIV => the text in <ul> is lighter.

Is there any way to apply opacity on the DIV (its background), but not on the content inside the DIV?

Thank you

Answer 1

Without pulling the ul out of the div, the only way I can think of to do this would be to make the background color partially transparent using rgba if it is a solid color:

background-color:rgba(0,0,0,.5);

This would make the background be black with 50% opacity, but would only work in newer browsers.

jsFiddle: http://jsfiddle.net/jdwire/XzeGE/

To support older browsers, you could instead base64 encode a tiny png into the css (or just reference an external image). See http://en.wikipedia.org/wiki/Data_URI_scheme for more info and see https://stackoverflow.com/a/5258101/1721527 for the drawbacks of embedding a base64 encoded image in the css or html.

If the background is an image, just make it a partially transparent png.