通过css实现透明背景层

转载：http://www.jiaoben8.cn/Article-id102.html

利用css来是透明背景层效果，效果如下：

实现方法：

#Transparent{
width: 100%;
background:rgba(255, 255, 255, 0.8);
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AFFFFFFF,endColorStr=#AFFFFFFF); 
}
RGBa是一种在CSS中声明包含透明效果的颜色的方法，通常我习惯了使用”opacity“，它很简单易用，但是，opacity会使所有的子元素都变成透明的，而且很难去解决这个问题。

通过RGBa，我们可以将一个元素设置为透明，而不会影响其子元素。

background:rgba(255, 255, 255, 0.8);前三个值，分别是红，绿，蓝三个色值，后边的是它的透明度，0为完全透明，10为不透明。

但是并非所有的浏览器支持RGBa，所以我们针对不支持RGBa浏览器做如下设置：

filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AFFFFFFF,endColorStr=#AFFFFFFF); 

解释一下当中的代码：

enabled:可选项。布尔值(Boolean)；

startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。

其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。

EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。

我们经常要用到的两个色值，应该最多为黑色透明，和白色透明，这两个色值分别是：黑色透明：startColorstr=#6B000000,endColorstr=#6B000000，白色透明：startColorStr=#AFFFFFFF,endColorStr=#AFFFFFFF。

当你做了如上操作后，你会发现div里面的内容也会变的模糊不清，解决方法很简单，对需要透明的div设成如上透明之后，里面的内容应该用一个div包起来，把里面包内容的div设置相对定位就好了:position:relative。