I am working with a menu using background images and ul li.

The idea is to build the menu with text in li and a little image in background.

For the image I put opacity 0.4 but the problem is that at the same time the opacity of the text

becomes 0.4

Can someone tell me how to separate the opacity of the text (1) and

of the background-image (0.4) please?

I don't know if I must use a jquery function or if I can do that only with CSS

you can check the page to

http://www.davidinlove.com/

here is the code

for the css

2. .icone li {
3. padding:0px;
4. margin:auto;
5. text-align:center; /* non*/
6. vertical-align:bottom;
7. width: 36px;
8. height: 49px;
9. border-radius:10px;
10. border: solid black 2px;
11. opacity: 0.4;
12. background-image: url("http://www.davidinlove.com/img/sprite_menu_PH.jpg");
13. background-repeat: no-repeat;
14. }
15. 
    

and the html (here I use sprite)

2. <div id="id-menu" class="c-menu">
3. <ul class="icone">
4. <a href="#1"><li class="icone-1">EIFFEL TOWER</li></a>
5. <a href="#2"><li class="icone-2"></li></a>
6. <a href="#3"><li class="icone-3"></li></a>
7. <a href="#4"><li class="icone-4"></li></a>
8. </ul>
9. <ul class="icone">
10. <a href="#5"><li class="icone-5"></li></a>
11. <a href="#6"><li class="icone-6"></li></a>
12. <a href="#7"><li class="icone-7"></li></a>
13. <a href="#8"><li class="icone-8"></li></a>
14. </ul>
15. </div>
16. 
    

Thanks for any help

David  ( @webtecgeek   www.thecacaocafe.com )