在使用RGBA调节透明度CSS3教程
CSS3中，添加一个不透明的特性，允许开发者设置透明度的元素，现在的透明度已经成为现代浏览器支持的主流，但不透明将同时设置元素和子元素设置为相同的透明度，透明的规则，这相当灵活，在实际开发中也经常遇到很多麻烦事实上，还有一套彩色透明的解决方案——在CSS3；mdash；RGBa。较混浊，RGBA可以没有子元素影响集单元的透明度，但RGBa的浏览器支持不透明度宽。因此，相对较少的开发人员已经注意到了。RGBA（R，G，B，A）
价值：
R：红色值。正整数|百分比
G：绿色价值。正整数|百分比
B：蓝色值。正整数|百分比
答：阿尔法透明度。值在0到1之间。
以下是白色，透明度与RGBA（50%套）。
CSS代码将内容复制到剪贴板。
{ p
颜色：RGBA（255, 255, 255，0.5）；
}
RGBA是RGB颜色模型的一个扩展，全称为RGB三色的缩写，α值代表了颜色/透明度透明度。
的RGBA颜色的详细介绍如下。
1。RGBA颜色库
RGBA在本质上是建立元素添加一个alpha通道，即在红加代表透明通道，绿色和蓝色之外的三个颜色通道，即我们熟悉的3个0到255的整数分别为红色，绿色，蓝色使用RGB，α值是0到1（一位小数）。下面举例说明它的具体使用：
在CSS 2.1中，支持RGB颜色声明。虽然开发商可能更习惯于使用# 343434、16位数字表示，例如，设置背景颜色# 343434例如ID的div元素，我们可以这样写。
CSS代码将内容复制到剪贴板。
RGB表示。
#例子{ background: rgb（52, 52, 52）；}
接下来，使用RGBA修改背景颜色的例子中采取0.5透明度。
CSS代码将内容复制到剪贴板。
设置0.5 透明
#例子{背景：RGBA（52, 52, 52，0.5）；}
*你也可以在0之前省略小数点。
#例子{背景：RGBA（52, 52, 52，5）；}
增加透明度的效果如下（为了更清楚地反映透明度的影响，示例中的主体增加了背景纹理）：
你可以看到，RGBa仅仅是添加在原有RGB的基础参数，虽然变化很小，它为开发者提供了很多方便。
此外，RGBA可以用于背景属性以及颜色和边框属性（注：边框属性使用RGBA，Firefox将从其他浏览器稍有不同）。
两。浏览器支持和增量增强
虽然RGBa已经在现代浏览器的主流得到了很好的支持，包括WebKit支持RGBa是最早的，至少在Chrome 0.415版本支持RGBa，Chrome可以说是非常可怕的，除了壁虎和Presto内核也逐渐认识到RGBa的支持，IE浏览器从IE9为RGBA。更具体的浏览器支持如下：
铬0.4.154.33 + +，Firefox 3，Safari 3.2.1 +，Opera 10.10 +，IE9 +
要获得更详细的浏览器支持，请参阅。
对于那些不支持RGBa的浏览器，可以使用增量改进解决，和Kayo提出的保色性。首先，开发者必须知道浏览者不支持RGBA以RGBA的CSS属性值作为一个语法错误，从而忽略了CSS属性设置。因此，开发人员可以设置一个没有建立前的RGBA颜色使用透明度属性，所以当浏览器不支持RGBa，不会有任何颜色。下面的例子显示了扩大：
# example1 { background: rgb（52, 52, 52）；背景：RGBA（52, 52, 52，5）；}
不支持RGBa将忽略二背景属性设置浏览器，按照第一属性值设置背景颜色的元素，虽然这不能使浏览器之间的相同的效果，但也达到类似的效果，并显示出良好的渐进增强的解决方案。
IE的课程，你可以使用过滤器来实现那些支持RGBA浏览器相同的效果。例如，您可以编写如下代码。
CSS代码将内容复制到剪贴板。
#例子{背景：RGBA（52, 52, 52，5）；}
{ #例子
背景：透明；
过滤器：ProgID：DXImageTransform.Microsoft.gradient（startcolorstr =34343432#，endcolorstr =34343432#）；
缩放：1；
}
需要注意的是，在相同的颜色和透明度的情况下使用的过滤器，只有16十六进制的使用。
即忽略了RGBA颜色设置和设置基于过滤器的颜色，其效果为RGBA相同。
三。不影响子元素
在文章的开头，我们已经介绍了RGBA相对不透明的优点是它不会影响其子元素，即透明度可以为元素设置单独设置子元素，而不受该设置的影响。这里的RGBA和不透明的元素之间的差异具体的设置两透明度的例子。
完整的代码：
CSS代码将内容复制到剪贴板。
RGBa和不透明度的效果之间的差异
体{ padding-top：200px；背景：URL（BG，PNG）；}
#例子，例子# {宽度：200px；身高：100px；保证金：0汽车；}
#例子{ background: rgb（52, 52, 52）；不透明度：0.5；}
#例子{保证金：20px；背景：RGBA（52, 52, 52，5）；}
。在{显示：块；宽度：50px；身高：50px；margin-left: 10px；背景：RGB（100, 140, 180）；}
具体的效果
可以看出，透明度将使跨一个子元素也成为半透明效果，而RGBa是只改变透明度的元素，并且在大多数情况下，开发人员只需要将当前元素的透明度（如面膜，半透明的背景），RGBA的使用将更加灵活。
此外，在IE9，这两者之间是有区别的RGBA颜色直接使用和透明度设置不透明度。（读者可以浏览演示下看IE9的具体作用），开发人员需要注意的差异。