Well, I was working the other day and one of my colleagues told me that the div that has a background colour with an opacity of 70 doesn't work in IE. After a bit of Googling and a bit of trial and error, I managed to get it working. (It works in Google Chrome, Mozilla Firefox, Internet Explorer 7, 8 and 9. However, the solution doesn't really work with Internet Explorer with different standards.)
Let's go through parts of the source codes first.
The following liner will enforce your Internet Explorer 9 onwards to fall back and use Internet Explorer 8 standards. However, this will also caused all your Internet Explorer 9 codes to malfunction.
<meta http-equiv="X-UA-Compatible" content="IE=8" >
The following codes are meant for super old browsers that doesn't supports the css RGBa(3 primary colours and alpha).
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
The following codes are meant for super new browsers that supports the css RGBa(3 primary colours and alpha). (For example: latest Mozilla Firefox, Google Chrome, etc.)
/* RGBa with 0.7 opacity */
background: rgba(0, 0, 0, 0.7);
The following codes are meant for the older Internet Explorers. Would need to add the condition <!--[if lte IE 8]>, because browsers like Internet Explorer 9 will apply both filters and RGBa. =.=""
<!--[if lte IE 8]>
<style>
#mainbg1 {
/* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000)";
}
</style>
<![endif]-->
And here's all the source codes at one glance.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=8" >
<title>Test</title>
<style type="text/css" media="screen">
body{
margin: 0px;
background-color:#00FF00;
}
#mainbg {
width:100%;
height:1000px;
text-align:center;
position:absolute;
}
#mainbg1 {
width:500px;
height:500px;
margin: 0px auto;
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.7 opacity */
background: rgba(0, 0, 0, 0.7);
}
</style>
<!--[if lte IE 8]>
<style>
#mainbg1 {
/* For IE 5.5 - 7*/ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000)";
}
</style>
<![endif]-->
</head>
<body>
<div id="mainbg">
<div id="mainbg1">
</div>
</div>
</body>
</html>
* Click
here for the demo shown in this post.
^ Click
here for the source files for the demo.
