HTML5 rgba与opacity的属性兼容ie6/7/8/9各浏览器

在css3之前，在样式中指定的颜色值只能为RGB颜色值，并且只能通过opacity属性来设置元素的透明度。CSS3中增加了3种颜色值-RGBA颜色值，HSL颜色值及HSLA颜色值，并且允许通过对RGBA颜色值和HSLA颜色值设定alpha通道的方法来更加容易地实现将半透明文字与图像互相重叠的效果。

alpha通道与opacity属性的区别

opacity属性时css中专门用来指定透明度的一个属性，取值范围也在0-1之间，0表示完全透明，1表示不透明。使用alpha通道对元素设定透明度时，可以单独针对元素的背景色和文字颜色等来指定透明度，而opacity属性只能指定整个元素的透明度。

但alpha通道与opacity属性并不兼容ie9以下的版本，以下为本人利用滤镜等方式解决了此问题，兼容各个版本。

RGBA方法（兼容各个版本）

[html]view plaincopyprint?
 
   
 <!DOCTYPE HTML>  
 <html lang="zh-CN">  
 <head>  
     <Meta charset="UTF-8">  
     <title>RGBa 与 opacity 效果的区别</title>  
     <!--以下为通用浏览器的写法-->  
     <style type="text/css">  
        .main{ background:#000; width:300px; height:300px; }  
        .main-1{ background:rgb(255,255); background:rgba(255,0.2);width:300px; height:50px; }  
     </style>  
       
<!--以下为针对ie浏览器的写法-->  
     <!--[if IE]>  
     <style type="text/css">  
        .main-1{  
             background: transparent;  
             filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#20ffffff', endColorstr='#20ffffff');  
             zoom: 1;  
             }  
     <![endif]-->  
      
 </head>  
 <body>  
    <div class="main"><div class="main-1"></div></div>  
 </body>  
 </html>  

opacity方法（兼容各个版本）

.main{ background:#000; width:300px; height:300px; }

.main-1{ background:#fff; filter:alpha(opacity=20);opacity:0.2;width:300px; height:50px; }
</style>
</head>
<body>
<div class="main"><div class="main-1"></div></div>
</body>
</html>

两者的不同(同样的背景、布局，只是一个采用opacity方法，另外一个采用rgba方法)

HTML5 rgba与opacity的属性 兼容ie6/7/8/9各浏览器

相关文章

HTML5 rgba与opacity的属性兼容ie6/7/8/9各浏览器