CSS3的rgba、opacity和filter的区别和详解

转载请注明预见才能遇见的博客：http://my.csdn.net/

原文地址：http://blog.csdn.net/pcaxb/article/details/56283025

CSS3的rgba、opacity和filter的区别和详解

1.RGBA的详细解释，rgba(r,g,b,a)
取值说明
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数 | 百分数
A：Alpha透明度。取值0~1之间
正整数为十进制0~255之间的任意值，百分数为0%~100%之间的任意值
RGBA是在R（Red）G（Green）B（Blue）模式上增加了alpha通道，alpha通道是不透明度，即，如果一个元素的alpha通道数值为0%（或0），那该元素就是完全透明的（也就是看不见的，但是可以透过该元素看到该元素下的元素），数值为100%（或255）时则意味着该元素完全不透明

2.opacity的详细解释opacity: value|inherit
取值说明
value:透明度，从 0.0 （完全透明）到 1.0（完全不透明）
Tip：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)

3.rgba和opacity的区别
opacity会继承父元素的 opacity 属性，而RGBA设置的元素的后代元素不会继承不透明属性。也就是说使用opacity设置透明，子元素也跟着透明，而使用RGBA设置透明，子元素不跟着透明。

4.opacity和filter的区别
opacity兼容CSS3 opacity的浏览器，是标准属性，代表透明度，取值范围是0-1，0代表完全透明，1代表完全不透明。filter兼容IE8以及低版的IE浏览器，是IE特有的，filter:Alpha(opacity=50)，filter这里的alpha是css中的函数，opacity参数代表透明度，取值范围是0-100，0代表完全透明，100代表完全不透明。

5.配合使用的兼容案例组合
案例1：需要子元素不透明的组合？

{
    /**兼容大部分浏览器，不会使子元素透明*/
    background-color:rgba(13,83,188,0.8);
    /**兼容IE低版浏览器，不会使子元素透明*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#CC0d53bc, endColorstr=#CC0d53bc);
}

案例2：需要子元素透明的组合？

{
    /**设置背景色，会使子元素透明*/
    background-color: rgb(13,83,188);
    /**兼容大部分浏览器，会使子元素透明*/
    opacity: 0.8;
    /**兼容IE低版浏览器，会使子元素透明*/
    filter:alpha(opacity=80);
}

CSS3的rgba、opacity和filter的区别和详解

博客地址：http://blog.csdn.net/pcaxb/article/details/56283025