Set opacity to the menu but keep text opaque in CSS

css transparency opacity rgba
Rodrigo Souza picture Rodrigo Souza · Aug 20, 2010 · Viewed 15.8k times · Source

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

hatkirby picture hatkirby · Aug 20, 2010

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/

Related questions

Drop shadow for PNG image in CSS

I have a PNG image, that has free form (non square). I need to apply drop-shadow effect to this image. The standard approach ... -o-box-shadow: 12px 12px 29px #555; -icab-box-shadow: 12px 12px 29px #555; -khtml-box-shadow: 12px 12px 29px #555; -moz-box-shadow: 12px 12px 29px #555; -webkit-box-shadow: 12…

Read More
Hex colors: Numeric representation for "transparent"?

I am building a web CMS in which the user can choose colours for certain site elements. I would like to convert all colour values to hex to avoid any further formatting hassle ("rgb(x,y,z)" or named colours). …

Read More
How do I make a transparent border with CSS?

I have an li styled as follows: li{ display:inline-block; padding:5px; border:1px solid none; } li:hover{ border:1px solid #FC0; } When I hover over the li the border appears without making the li's shift around. Is it possible …

Read More