In this example, the CSS is compatible with IE6/IE7/IE8 and Firefox to achieve the translucent layer effect. I have encountered this problem before, that is, after setting a layer to translucent, the text in is also semi-transparent, and no proper solution has been found. Today I see an article in designcss.orgArticleThis problem is solved, but one thing is that an asterisk is added to the front of the filter. The asterisk is added to allow IE6 and IE7 to be executed. Firefox and IE8 will not be executed, firefox itself does not support the filter function unique to IE, so there is no need to add an asterisk here. In addition, the Internet Explorer 8 is not supported. After research, I found a lot of information and finally found a solution. I will share the solution below.
CSS uses the \ 9 method in CSS hack to be compatible with different browsers.
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; charsets = UTF-8" />
5 < Title > Compatible with CSS transparent filters of IE6, IE7, and Firefox. text does not inherit its transparent attributes. </ Title >
6 < Style Type = "Text/CSS" >
7 # Container { Border : 1px solid # c00 ; Background-color : Rgba (0.5, 0, 0) ; 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 > I am content I </ Span >
14 </ Div >
15 </ Body >
16 </ Html >