CSS - Aplicar opacidad al elemento pero NO a texto dentro del elemento

Question

He creado un elemento de bloque de menú al que he aplicado una opacidad de 0.4/40 a.

El problema que tengo es que la opacidad afecta el texto dentro del bloque de menú y estoy buscando que la opacidad SOLO se aplique al bloque de menú, pero no al texto.

Espero haber perdido algo tonto. Aquí está mi código:

#menuLeft{ 
    background-color: #33AAEE; 
    float: left; 
    width: 20%; 
    clear: both; 
    opacity:0.4; 
    filter: alpha(opacity = 40); 
} 

Busco una forma de mantener el color del texto de la misma/establecer la opacidad de excluir el texto.

Gracias.

Answer 1

Este es un problema muy, muy, muy popular. Trate de usar rgba():

//Your opacity is the latest value here for Firefox 3+, Safari 3+, Opera 10.10+ 
background-color: rgba(51, 170, 238, 0.6); 
//Your opacity is the first pair here (in HEX!) for IE6+ 
progid:DXImageTransform.Microsoft.gradient(startColorstr=#9A33AAEE,endColorstr=#9A33AAEE); 
zoom: 1; 
float: left; 
width: 20%; 
clear: both; 
/*opacity:0.4; 
filter: alpha(opacity = 40);*/ 

También puede utilizar http://css3please.com/ para convertir fácilmente desde HEX a RGB y la espalda.

Answer 2

trate de poner el texto en un elemento span/div sin transparencia

Answer 3

También puede poner una imagen transparente como el fondo. El texto debería mostrarse normalmente. http://css-tricks.com/snippets/css/transparent-background-images/