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

最新推荐文章于 2022-12-19 12:32:13 发布

置顶 NaNawork

最新推荐文章于 2022-12-19 12:32:13 发布

阅读量2.1k

点赞数

本文链接：https://blog.csdn.net/nanawork/article/details/36217175

版权

HTML5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在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方法（兼容各个版本）

<!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方法（兼容各个版本）

<!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方法

<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方法

<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属性只能指定整个元素的透明度。

附件下载：opacity与rgba案例

NaNawork

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 rgba与opacity的属性兼容ie6/7/8/9各浏览器

RGBa 与 opacity 效果的区别 .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; }
复制链接

扫一扫