简单css代码实现背景透明 -文字不透明支持ie和火狐(FF)

这几天公司很忙。好几个单子都堆在一起在做。最近这几个单子都是细节修改较多。有的时候感觉做网站越来越累了。

这几个客户都谈的比较爽快。还是一步一步帮他们修改。其中有一家客户需要修改的下拉菜单的背景颜色要透明。

我第一想到的就是 css做。然后就找了下资料。发现透明我们直接用：filter:alpha(opacity=50); 然后就写了下，然后测试

发下IE 可以了。就此以为解决了。但是用火狐打开了一下。发现没透明。郁闷。兼容有问题。又接着找资料。发现火狐透明是用：

opacity:0.5; 然后测试了。OK解决了。下面贴出完整的代码和效果图：

css透明背景代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css透明背景代码测试</title>
</head>

<body>

</div>
</body>
</html>

但是大家在做栏目背景透明的时候。会发现。他会和字一起透明了。所有就要用到特定的css 写。用几个绝对层来写！

代码如下：

<html>
<title>css透明代码</title>
<head>
<style>
#container {
color: #154BA0;
background: #ff0000;
filter: Alpha(Opacity=10, Style=0);
opacity: 0.10;
position: absolute;
height: 200px;
width:500px;
z-index:20;
}

#text {
position: absolute;
height: 200px;
width:500px;
text-align:center;
z-index:30;
}
</style>
</head>
<body >
<div id="container"></div>
<div id="text">背景半透明但文字不透明</div>
</body>
</html>