css如何实现背景透明，文字不透明？

之前做了个半透明弹层，但设置背景半透明时，⼦元素包含的字体及其它元素也都变成了半透明。对opacity这个属性认识的不透彻，在这⾥做⼀些总结，⽅便以后使⽤。

背景透明，⽂字不透明的解决⽅法：

1. 为元素添加⼀个绝对定位的⼦元素，设置⼤⼩和该元素⼀样，把半透明加在绝对定位元素上作为遮罩，z-index设置到最底部，达到背景半透明效果。

2. 使⽤CSS3新属性rgba。

实现透明的⽅法：

css3的opacity，取值从 0 到 1，如opacity : 0.5，IE9及以上版本和标准浏览器都⽀持。IE8 以及更早的版本⽀持替代的 filter 属性，例如：filter : Alpha(opacity=50)。

css3的rgba(red, green, blue, alpha)，alpha的取值从 0 到 1，如background-color : rgba(255,255,255,0.5)。⾕歌浏览器下测试各种属性，如下图。

图1

css3的opacity：

由图1可以看出，使⽤opacity属性的第⼆个⽅块其⼦元素包含的⽂字也变成了半透明。

注释：设置opacity元素的所有后代元素会随着⼀起具有透明性，⼀般⽤于调整图⽚或者模块的整体不透明度，兼容IE9及以上版本和标准浏览器。

css3的rgba：

由图1可看出，设置rgba的⽅块可实现背景⾊透明，并且⼦元素包含的⽂字不透明。

注释：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+都⽀持。

IE的filter : Alpha(opacity=x)：

仅⽀持IE6、7、8、9，在IE10版本被废除。

在IE6、7中，需要激活IE的haslayout属性(如：*zoom:1或者*overflow:hidden)，让它读懂filter:Alpha。

在IE6、7、8中，设置了filter:Alpha的元素，⽗元素设置position : static(默认属性)，其⼦元素为相对定位position : relative，可让⼦元素不透明。

全兼容： rgba

IE6IE7IE8IE9标准浏览器✘

✘✔

✘✔

✔✔

✔✘

filter : Alpha✔

只⽀持IE6、7、8浏览器的css hack：

/* 只⽀持IE6、7、8 */

@media \\0screen\\,screen\\9 {...}

DEMO：