第一天，谈谈【透明】
提到透明，大家首先会想到opacity。先来看测试用例一：
.case{
/*省略无关样式*/
background-color: red;
opacity: 0.5;
}
在支持opacity的浏览器里效果如下：
opacity的兼容性如下图：
在不支持opacity的IE6、7、8中效果如下：
为了兼容IE6、7、8，需要使用filter:alpha(opacity=..)，来看测试用例二：
.case{
/*省略无关样式*/
background-color: red;
filter:alpha(opacity=50);/* for IE8 and earlier */
opacity: 0.5;/* for IE9 and other browsers */
}
在IE6中效果如下，（IE7、8也相同）
但是opacity会引起一些副作用，来看测试用例三：
.case{
/*省略无关样式*/
background-color: red;
filter:alpha(opacity=50);
opacity: 0.5;
}
.inner{
/*省略无关样式*/
background-color: blue;
color: #000;
}
效果如下：（仔细看，最内层元素里是有文字的）
可以看到，透明元素包含的子元素也透明了，尽管已经将子元素的color设置为#000，但文字还是透明到看不清楚。
这很可能不是你想要的效果，那么为了避免子元素受影响，我们需要用到CSS3提供的RGBA(R,G,B,A)，
通过最后的参数A（Alpha通道），可以设置元素的透明度。测试用例四：
.case{
/*省略无关样式*/
border:1px solid #000;
background:rgba(255,0,0,0.5);
}
显示效果如下：
但是在IE6、7、8中显示如下：
RGBA(R,G,B,A)的兼容性如下：
为了兼容IE6、7、8，我们需要用到DXImageTransform.Microsoft.gradient滤镜，来看测试用例五：
.case{
/*省略无关样式*/
border:1px solid #000;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7FFF0000', endColorstr='#7FFF0000');
background:rgba(255,0,0,0.5);
}
此时在IE6中效果如下：
简单解释下：要给DXImageTransform.Microsoft.gradient滤镜设置起点色（startColorstr）和终点色（endColorstr），在此我们只想让它透明而无需渐变，只需让起点色和终点色相同。需要注意的是，它们的取值是一个八位的十六进制值，前两位表示alpha通道值，00表示完全透明，FF表示完全不透明；后六位则是这个颜色的RGB值。
我们再次给透明元素添加一个子元素，测试用例六：
.case{
/*省略无关样式*/
border:1px solid #000;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7FFF0000', endColorstr='#7FFF0000');
background:rgba(255,0,0,0.5);
}
.inner {
/*省略无关样式*/
color: #000;
background-color: blue;
}
效果如下：（IE7、8相同）
但是IE9却稍有不同，如下：
我们可以发现，在IE9中透明元素的颜色与其他浏览器稍有偏差，原因我们以后再探究。
为了保险起见，我们还可以增加一个fallback（后备）颜色，也就是不透明时的颜色，如果某个浏览器不支持透明，就会显示这个颜色。代码如下：
.case{
/*省略无关样式*/
border:1px solid #000;
background-color: #ff0000;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7FFF0000', endColorstr='#7FFF0000');
background-color:rgba(255,0,0,0.5);
}
但是惊奇的发现，增加后备颜色后，在IE6、7下显示正常，在IE8下却不正常了。
这里需要一个小技巧，需要在样式里增加一条background:transparent，再看IE8效果：
至于为什么background:transparent会有这样的效果，我们后面再探究。
至此我们可以总结下，使元素透明的样式可以这样写：（颜色替换成你需要的）
推荐一个小工具：css 背景颜色属性值转换
.case{
/*省略无关样式*/
background-color: #ff0000;
background: transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7FFF0000', endColorstr='#7FFF0000');
background-color:rgba(255,0,0,0.5);
}
在写上文的过程中，发现需要展开写的地方有很多，比方说：RGBA(R,G,B,A)，不仅仅可以用来背景透明，还有其它好多用途。还有filter也值得展开说说，突然觉得transparent好深奥，也得深入下。O(∩_∩)O哈哈~，没关系，慢慢来，后面会把它们一一展开。
那接下来准备谈谈RGBA(R,G,B,A)