This example is a compatible css IE6 / IE7 / IE8 and Firefox browsers to achieve the translucent layer effect, before I have encountered this problem after is to set a semi-transparent layer, also followed the text within the translucent, not find a suitable solution, see today designcss.org an article to solve this problem, but one thing and found one more asterisk in front of the filter, pay more asterisks is to enable the implementation of IE6 and IE7, IE8 and Firefox is not performed, Firefox itself is concerned not support IE-specific filter function, so there is no need coupled with an asterisk. There is no support IE8 browser, through research, access to large amounts of data, and finally find a solution to share out below.
css used \ 9 is css hack wording is to be compatible with different browsers use
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>兼容ie6,ie7以及firefox的css透明滤镜，文字不继承其透明属性</title>
6 <style type="text/css">
7 #container{ border:1px solid #c00; background-color:rgba(212,0,0,0.5); background:#f00\9; filter:alpha(opacity=50); width:500px; margin:40px auto; line-height:200%; font-size:14px; padding:14px;}
8 #container *{ position:relative;}
9 </style>
10 </head>
11 <body>
12 <div id="container">
13 <span>我是内容我是内容我是内容我是内容我</span>
14 </div>
15 </body>
16 </html>
