Search code examples
csstransparencyopacityrgba

Set opacity to the menu but keep text opaque in CSS

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?

Solution

  • 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/