In Example #2, a semi-transparent PNG serves as the background image. You can make the image opacity as dark or light as needed in Photoshop.
Thanks for the response, Nancy. Does this mean there is not a way to do it with only CSS (i.e. without resorting to a PNG image background)?
Without looking into it too much meaning i am not sure on the CSS support for opacity. I would class this as enrichment therefore I would use rgba transparency to set the background colour. Ofcourse not all users will get to see this but it is a nice treat for those who have rgba supporting browsers.
You could try this, it is just a wild guess setting the bg opacity on the ul to .5 or whatever matches your requirement and then setting the li opacity back to 1 ??
hope that helps
When you apply opacity rules to a container, content inside that container is dimmed to whatever opacity value is expressed. Even if you nest another division inside the parent, you get dimmed content. AFAIK, there is no way around this that is cross browser compatible.
The clear advantage to using a transparent background image (no pun intended) is that it won't dim the content.
Thanks, Nancy! I really appreciate your help.