CSS代码实现背景透明文字不透明

按照以前的写法是使用两个元素来控制，一个写背景透明、一个写文字。然后通过定位：absolute和层级：z-index来控制。现在我们可以通过如下方法使用一个元素来控制： 在 FF/Chrome 等较新的浏览器中可以使用css属性background-color的rgba轻松实现背景透明，而文字保持不透明。而IE6/7/8浏览器不支持rgba，只有使用IE的专属特性filter:属性来制作透明背景。

.caibaojian{
     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000,endColorstr=#80000000)"; /*Filter for IE8 */    
     filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#80000000, endColorstr=#80000000); /*Filter for older IEs */}
:root .caibaojian{
filter:none;/*IE9不需要filter*/
background:#000;
background: rgba(0, 0, 0,0.5);
}

这里需要注意的是startColorStr和endColorStr的值#80000000,其中前两位是十六进制的透明度80,也就是透明值为0.5而后面六位是十六进制的颜色#000000(black黑色)。透明度转换表：