Feb 04 2012
CSS background color, opacity and alpha
If you need to have a background color with a background not fully opaque, i.e. with an alpha layer, here’s the sample CSS taht you need:
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
the last two lines of the CSS are for older Internet Explorer browser, while Internet explorer 9 and the upcoming IE 10 fully support the alpha channel. The problem is that those browsers will use both the opacity lines, so you will have a double level of opacity, and a different behavor in IE9 and IE10 (strangely, in this case IE6-7 and Firefox Chrome Safari will behave the same!!). The best solution would be to add a conditional css inclusion and put the last two lines in an external browser, like this:
<!--[if lt IE 9]> <link rel="stylesheet" type="text/css" media="all" href="css/ie.css" /> <![endif]-->
and add the last two lines above in this file.


Default
Small Fonts
Big Fonts