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.)
<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.
No comments:
Post a Comment