创建IE7不透明的背景,而不会影响文本

问题描述:

这是下面的HTML结构(见JS Fiddle)创建IE7不透明的背景,而不会影响文本

需要以某种方式使白色BG在20%的不透明度,同时保持文本的黑色。需要备份工作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 
} 
+0

使用白色背景图像与alpha透明度? – cimmanon 2013-05-01 15:22:31

+0

[不透明背景,但不是文字]的可能重复(http://*.com/questions/637921/opacity-of-background-but-not-the-text)。这个答案给了IE7的倒退。 – ScottS 2013-05-01 15:23:38

为了简单起见,我建议使用一个透明的PNG图像与一些PNG固定JavaScript以保证向后兼容性。

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

否则,你可以尝试在不透明度克里斯Coyier的相关提示,看看是否适合你:

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