Setting the opacity of an element within a div with opacity defined by CSS?

Question

I'm working on a project in which I am using an image as a background for a menu. I have defined classes in my CSS stylesheet that dictate the appearance when items are or are not "selected", meaning the user is not on the page each item is linked to.

I have it structured with a div on top of the image with styles applied to it to make it have a semi-transparent white background, so it looks like that part of the image is highlighted. Each semi-transparent div also contains the text that makes up the link, with a color set to white. I would like the div to keep the opacity, while the text remains at an opacity of "1".

I have tried the method discussed in a similar question (CSS - Apply Opacity to Element but NOT To Text Within The Element) but the method does not seem to work for me.

I've posted the bit of code for the link on JSFiddle at http://jsfiddle.net/Cwca22/uG5y8/ if you'd like to take a look at it.

Thanks in advance for all the help.

Answer 1

If you're looking for a pure CSS solution, and are willing to change your markup a little, take a look at this example:

http://jsfiddle.net/jJ4MZ/3/

It treats each "link" as a combination of separate background and text elements, and then positions them over each other, so that only the background div uses transparency.

Answer 2

If I'm understanding you correctly, you want the background colour of the div to be partially transparent to show the image through, but keep the text opaque? That's simple :3

<div style="background-color: rgba(255,255,255,0.5);">Text</div>

If you want to provide support for browsers that don't allow this format, then you need:

<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>