Set opacity to the menu but keep text opaque in CSS

Question

How can I create a menu which only its background is transparent? The text should keep opaque (opacity: 1)

If I set

li:hover {
    opacity: 0.5
}

The whole list item becomes transparent. How do I fix that?

Answer 1

There is a new value in CSS3 called "rgba" that allows you to use a transparent color as a background color. For instance:

li:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

I'm fairly sure that should work, though I just wrote the code on the spot so it may not. This will, however, give your menu a white-ish tinge to it. If you want to read more about RGBA, though, go here: http://css-tricks.com/rgba-browser-support/

Answer 2

You can't. The transparency level gets handed down to all child elements.

Your options:

• Place another element on top of the li, possibly using position: absolute, that has a normal opacity setting

• Use a PNG file with Alpha transparency to create the opacity effect (Will need workarounds to work in IE6)

• Use the new rgba colour property as shown by @hatkirby, if you can live with the incomplete browser support

Answer 3

You’ll need to use either a transparent PNG image, or an rgba colour value, for the <li>’s background, e.g.:

li:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

Or:

li:hover {
    background: url(a-nice-semi-transparent-png-image.png);

    /* Supplying just the image file here will make the browser repeat the image
    file vertically and horizontally, thus taking up all the space, just like a 
    colour would */
}

Answer 4

I don't think, that's possible, try this example: http://jsfiddle.net/578SV/