CSS实现背景透明，文字不透明（兼容各浏览器）

2022-12-21 12:31:47

在 FF/Chrome 等较新的浏览器中可以使用css属性background- color的rgba轻松实现背景透明，而文字保持不透明。而IE6/7/8浏览器不支持rgba，只有使用IE的专属滤镜filter:Alpha来实现，但是这样写法会把文字也变为透明，因此只有在透明容器的子节点（文本节点除外）内设置position:relative才能不继承其父元素的透明滤镜，代码如下：

#container{
background: #000000\9;
filter:Alpha(opacity=70);/* 只支持IE6、7、8、9 */
background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
*zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
}

#container div{ position:relative;} //container下的div的id