CSS - Zastosuj krycie do elementu, ale NIE do tekstu w elemencie

Question

Utworzono element bloku menu, który zastosowałem nieprzezroczystość 0,4/40 do.

Problem polega na tym, że krycie wpływa na tekst w bloku menu i szukam, aby nieprzezroczystość była stosowana TYLKO w bloku menu, ale nie w tekście.

Mam nadzieję, że właśnie opuściłem coś głupiego. Oto mój kod:

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

Szukam sposobu, aby zachować kolor tekstu tak samo/ustawić krycie, aby wykluczyć tekst.

Dziękuję.

Answer 1

To bardzo, bardzo, bardzo popularny problem. Spróbuj użyć 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);*/ 

Można również użyć http://css3please.com/ łatwo przekonwertować z HEX na RGB iz powrotem.

Answer 2

Spróbuj umieścić tekst w elemencie rozpiętość/div bez przejrzystości

Answer 3

Można również umieścić przejrzysty obraz jako tło. Tekst powinien być wyświetlany normalnie. http://css-tricks.com/snippets/css/transparent-background-images/