rgba alpha 透明度在ie下的兼容问题

RGBA语法：

1. div {
2. background: rgba(0,0,0,0.5);
3. }

浏览器兼容性：

类型	Internet Explorer	Firefox	Chrome	Opera	Safari
版本	(×)IE6	(√)Firefox 3.0.10	(√)Chrome 2.0.x	(√)Opera 9.64	(√)Safari 4
	(×)IE7
	(×)IE8
	(√)IE9

RGBA和opacity的区别

opacity (filter: Alpha(Opacity=50) 或opacity:0.5)会使整个元素包括子元素透明，而RGBA仅仅是元素本身透明,子元素不透明。

下面具体讲讲怎样让IE浏览器支持RGBA颜色
一、CSSPIE
CSSPIE可以让color、background、 box-shadow支持RGBA
示例：

1. div{
2. color:rgba(0,0,0,.5);
3. background:rgba(0,0,0,.5);
4. -pie-background:rgba(0,0,0,.5);/*IE6-8*/
5. box-shadow:1px1px rgba(0,0,0,.5);/*仅在未设置模糊值的情况下支持rgba*/
6. }

二、filter
通过IE滤镜让背景色透明，模拟rgba效果,不会影响子元素的背景透明度.
示例：

1. .filter{
2. filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#BF000000,endColorstr=#BF000000);
3. }

我们需要留意的是StartColorStr和EndColorStr的值，前两位是十六进制的透明度，后面六位是十六进制的颜色。
换算方法：x=alpha*255 将计算的结果x转换成十六进制即可.

1、在你的网页加载 PIE.js (官方下载地址:http://css3pie.com/download-latest)。

注意，用IE专用的注释，防止非IE浏览器下载。

<!--[if lt IE 10]>

<script type="text/javascript" src="PIE.js"></script>

<![endif]-->

 

2、用js 调用：

$(function() {

    if (window.PIE) {

        $('.rounded').each(function() {

            PIE.attach(this);

        });

    }

});