RGBa颜色 css3的Alpha通道支持-CSDN博客

　　　　CSS3中，RGBa 为颜色声明添加Alpha通道。

　　　　RGB值被指定使用3个8位无符号整数(0 – 255)并分别代表红色、蓝色、和绿色。增加的一个alpha通道并不是一个颜色通道——它只是用来指定除其它三个通道提供的颜色信息之外的透明度。

<ul>
    <li class="hundred">100%</li>
    <li class="eighty">80%</li>
    <li class="sixty">60%</li>
    <li class="forty">40%</li>
    <li class="twenty">20%</li>
</ul>

CSS样式

ul{list-style: none}
ul li{padding:.5em}
ul li.hundred{background:rgba(0,0,255,1)}
ul li.eighty{background:rgba(0,0,255,0.8)}
ul li.sixty{background:rgba(0,0,255,0.6)}
ul li.forty{background:rgba(0,0,255,0.4)}
ul li.twenty{background:rgba(0,0,255,0.2)}

兼容性写法

div {
   background: rgb(200, 54, 54); /* 向下兼容 */
   background: rgba(200, 54, 54, 0.5);
}

　　　　　　　　浏览器对”color:rgb” 和”color:rgba” 是分开处理的。　　　　　　　　

RGBa的浏览器支持情况

浏览器，版本，操作系统	测试结果	退路
Firefox 3.0+	支持	—
Firefox 2.0-	不支持	纯色
webkit -safari 3.x+	支持	—
webkit -safari 2.0-	不支持	–
Mobile Safari (iPhone/iPod Touch /iPad)	支持	—
opera 10.x+	支持	—
Opera 9.x-	不支持	纯色
IE 5.5 -	不支持	无色
IE 6-8	不支持	纯色
IE 9	支持	—
Google Chrome 所有版本	支持	—
Netscape 所有版本	不支持	没有颜色
SeaMonkey 1.1.x	不支持	无色
SeaMonkey 2.0 +	支持	—
BlackBerry Storm Browser	支持	–

IE下面的实现：

<!--[if IE]>
   <style type="text/css">
   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 
    </style>
<![endif]-->

转载于:https://www.cnblogs.com/dying/p/3346192.html