Css使背景透明内容不透明得方法

以前是这样实现背景透明内容不透明的：将背景与内容分别放在两个DIV中，然后使背景DIV透明，最终达到背景透明内容不透明的效果（挺麻烦的），背景透明使用的样式是{opacity:0.5;filter:alpha(opacity=50);}。

最近才发现，原来还有更好的方法。

支持CSS3的浏览器我们可以使用">对于不支持CSS3的IE浏览器我们可以使用滤镜来达到使背景透明的目的，我们可以使用IE专有的滤镜，如下：

filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#77000000, endColorstr=#77000000);

只需要保持startColorStr与endColorStr值相同即可。其中startColorStr与endColorStr的值的格式为#AARRGGBB， AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度， 00 是完全透明， FF 是完全不透明。超出取值范围的值将被恢复为默认值。 取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF （不透明蓝色）。

因此，如果需要实现DIV背景透明内容不透明则可以这样做：

.opacity{background:rgba(0,0,0,0.5); filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr=#77000000, endColorstr=#77000000);}

上面的做法是让所有的IE浏览器都使用滤镜，而IE9，IE10是支持CSS3的rgba属性的，所以我们可以做一些处理：

在head中再添加（针对IE9以下的浏览器）：

<!--[if lt IE 9]>

<style>

.opacity{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#77000000, endColorstr=#77000000);}

</style>

<![endif]-->