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

来源：互联网发布：开淘宝店设计思路编辑：程序博客网时间：2024/06/05 10:34

在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,255); background:rgba(255,255,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;  
            }  
    </style>  
    <![endif]-->  
     
      
</head>  
<body>  
   <div class="main"><div class="main-1"></div></div>  
</body>  
</html>  

opacity方法（兼容各个版本）

[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:#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方法)

opacity方法

[html] view plaincopyprint?
<span style="font-family:SimSun;font-size:12px;"><!DOCTYPE HTML>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <title>RGBa 与 opacity 效果的区别</title>  
    <style type="text/css">  
       .main{  
        background:#000;  
        filter:alpha(opacity=20);  
        opacity:0.2;   
        width:300px;   
        height:300px;   
        top:0; left:0;   
            }  
  
  
     .main-1{   
        background:#fff;  
        filter:alpha(opacity=50);  
        opacity:0.5;   
        width:300px;  
        height:50px;   
        color:#000;   
        }  
    </style>  
       
</head>  
<body>  
   <div class="main"><div class="main-1">背景、文字都透明</div></div>  
</body>  
</html></span>  

RGBA方法

[html] view plaincopyprint?
<span style="font-size:12px;"><!DOCTYPE HTML>  
<html lang="zh-CN">  
<head>  
    <meta charset="UTF-8">  
    <title>RGBa 与 opacity 效果的区别</title>  
    <style type="text/css">  
       .main{ background:rgb(0,0,0); background:rgba(0,0,0,0.2); width:300px; height:300px; top:0; left:0; }  
       .main-1{ background:rgb(255,255,255); background:rgba(255,255,255,0.5);width:300px; height:50px; color:#000; }  
    </style>  
    <!--以下为针对ie浏览器的写法-->    
    <!--[if IE]>    
    <style type="text/css">    
       .main{    
            background: transparent;    
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#20000000', endColorstr='#20000000');    
            zoom: 1;    
            }   
       .main-1{    
            background: transparent;    
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#50ffffff', endColorstr='#50ffffff');    
            zoom: 1;    
            }    
    </style>    
    <![endif]-->    
       
</head>  
<body>  
   <div class="main"><div class="main-1">背景透明，文字不透明</div></div>  
</body>  
</html></span>  

从上面的运行结果来看，得出以下结论：

使用alpha通道对元素设定透明度时，可以单独针对元素的背景色和文字颜色等来指定透明度，而opacity属性只能指定整个元素的透明度。

案列下载地址 http://pan.baidu.com/s/1o6KaTya

0 0

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

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