This example is a compatible IE6/IE7/IE8 and Firefox browser CSS to achieve translucent layer effect, before I have encountered such a problem, is to set a layer of translucent, the text in the following translucent, has not found a suitable solution, Today, I saw designcss.org an article that solved this problem, but there is a point, found in the filter to add an asterisk, add an asterisk is to let IE6 and IE7 execution, Firefox and IE8 do not execute, Firefox itself does not support IE-specific filter function, so there is no need to add an asterisk. There is not support IE8 browser, after research, access to a large number of data, finally found a solution, the following share out.
CSS used in the 9 is the style of CSS hack, in order to compatible with different browsers to use
Code section:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
<html xmlns= "http://www.w3.org/1999/xhtml"
<head>
<meta http-equiv= "Content-type" content= "HTML; Charset=utf-8 "/>
<title> compatible ie6,ie7 and Firefox CSS transparent filters, text does not inherit its transparent properties </title>
<style type=" text /css "
#container {border:1px solid #c00; Background-color:rgba (212,0,0,0.5); background: #f009; Filter:alpha ( OPACITY=50); width:500px; margin:40px Auto; line-height:200%; font-size:14px; padding:14px;
#container *{Position:relative}
</style>
</head>
<body>
<div id= "container"
<span> I am content I am content I am content I am content i </span>
</div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
