rgbA Opacity with Gradients

simulate rgbA opacity in IE Gradients

by clairesuzy

HTML

<!--[if lte IE 9]>
<style type="text/css" media="screen">
#alpha {
  background: transparent;
  zoom: 1;    
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */
}

#beta {
   zoom: 1;
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
   filter: alpha(opacity=60);    
}
</style>
<![endif]-->

<div id="ap"></div>
<div id="alpha"> this div background is semi-transparent - <span>spanned bg and all text is not</span>...</div>
<div id="beta"> this way... <span>uses opacity, everything is affected by the parents opacity</span>...</div>

CSS

html, body {background: #dad; height: 100%;}
 
 /* decoration */
 #ap {position: absolute; width: 50px; top: 0; right: 50px; bottom: 0; height: 100%;  background: #fff;}
 
 #alpha {
   position: relative; 
   z-index: 1;
   margin: 20px 0;
 
   color: #000;
   background: #9a779a; /* Fallback for web browsers that doesn't support RGBa */
   background: rgba(0,0,0,0.3)
 }
 
 
 #beta {
 position: relative; z-index: 1;
    background: #000;
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;                
 }
 
 #alpha span, #beta span {background: #fff;}