关于背景色半透明的实现

　　好吧，国庆七天假期出去玩去了，什么都没做。。。

　　言归正传，还是说说背景色半透明吧。其实说到半透明，相信绝大部分同仁应该都知道的一种很常用的方法，即css3的opacity结合ie alpha滤镜即可。比如：

.translucent{
	background:#000;
	opacity: 0.5;
	filter: progid:DXImageTransform.Microsoft.alpha(opacity=50);
}

上面这个样式类即为一个背景色为黑色，元素半透明的样式类。这也是目前半透明遮罩层最常用的方法，（ps:有个小地方需要注意，在ie6下需要触发它的haslayout或包裹性才有效，不过一般不存在问题，因为一般这种半透明遮罩的元素都是绝对定位的，overflow:hidden;或position:absolute;或float或display:inline-block都可以触发元素包裹性..这个问题扯远了，以后会单独再出一篇关于包裹性的文）

示例：打开

恩，正如各位看官所见，打开的层的确半透明了，不过半透明的好彻底，以至于层里面所有子元素都半透明了...但是我的层里面的图片和那个红色的块本来是不打算透明的，我只要背景色透明就好了..所以这个方法并没有满足这个需求。

于是，针对只要背景色透明的东东，应该有另一种办法，就是css3的rgba属性结合ie的gradient滤镜

.bg-translucent{
	background:rgba(0,0,0,0.5);/*前三个参数为rgb颜色，第四个参数为透明度*/
    filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);/*#7F000000的前两位为16进制透明度，后六位为16进制颜色*/
}

示例：打开

好了，至此，也差不多可以结束了，有点凑数的嫌疑，就当自己的笔记吧。