团队里经常遇到，索性整理一起

是我们在前端开发中经常遇到的，在问题中经常遇到的两个问题是背景色透明和整体透明

---

先说下背景色透明，背景色透明，在现代浏览器中，可以用rgba颜色作为背景色。

简单介绍下rgba色，这个是在css3 出现的标准。所谓RGBA颜色，顾名思意就是R+G+B+A的颜色，再具体点就是RED+GREEN+BLUE+ALPHA的颜色，小写一下就是red+green+blue+alpha的颜色，翻译一下就是红+绿+蓝+Alpha透明的颜色。通过改变a的值来改变透明度。

background:rgba(200, 54, 54, 0.5);

这个颜色就是透明度为0.5的颜色背景，

如何处理兼容如果想要IE也支持颜色透明，那就要动用IE的私有滤镜

FILTER:progid:DXImageTransform.Microsoft.Gradient

兼容写法实例：

background:rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

这里的7F是十六进制的表达方式，00 为最小的透明度（完全透明）FF为最大透明值（完全不透明）

---

下面说下整体透明

整体透明区别于背景色透明就是整个元素的都是透明的，在css3新的标准中为

opacity: .5;

兼容IE的写法

/* IE 4-9 */  filter:alpha(opacity=50);  /*This works in IE 8 & 9 too*/  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /*IE4-IE9*/  filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);