Creating an IE7 opacity background without affecting the text

Question

This is the following HTML structure (see JS Fiddle)

Need to somehow make the white BG at 20% opacity whilst keeping the text black. Needs to work back to IE7.

<ul class="menu">
    <li class="first expanded active-trail active menu-mlid-188"><a href="/educatours/aboutus" title="" class="active-trail active">About Us</a>
    </li>
    <li class="expanded menu-mlid-186"><a href="/educatours/tour_process" title="">Teachers</a>
        </ul>
    </li>
</ul>

body {
    background-color:#E2DFD5;
}
ul.menu a {
    color:#333;
    font-weight:bold;
    text-decoration:none;
}
ul.menu li {
    list-style-type:none;
    padding:0;
    margin:0;
    display:inline-block;
    width:49%;
    background-color:#FFF;
}
ul li.expanded {


 list-style-image:none
}

possible duplicate of [Opacity of background, but not the text](http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text). This answer gives fall backs for IE7. — ScottS, May 01 '13 at 15:23

score 0 · Answer 1 · answered May 01 '13 at 15:24

For simplicity I'd suggest using a transparent png image with some png fix javascript to ensure backwards compatibility.

http://www.dillerdesign.com/experiment/DD_belatedPNG/

Otherwise you could try Chris Coyier's tips on opacity and see if that works for you:

http://css-tricks.com/css-transparency-settings-for-all-broswers/

Creating an IE7 opacity background without affecting the text

1 Answers1