CSS：不透明只有背景，不是里面的文字
这个问题在这里已经有了答案：
简单的方法是将文本移动到单独的div中，如下所示。 基本上，你应用不透明度到一个单独的div，并将文本置于顶端...
<div id="parent">
<div id="opacity"></div>
<div id="child">text</div>
</div>
div#parent { position:relative; width:200px; height:200px; }
div#child { position:absolute; width:200px; height:200px; z-index:2; }
div#opacity { position:absolute; width:200px; height:200px; z-index:1; }
另一条路线是rgba。 不要忘记有一个独立的css属性来喂IE，因为它不支持rgba属性。 你也可以提供一个透明的PNG。
#regForm {
background: rgb(200, 54, 54); /* fallback color */
background: rgba(200, 54, 54, 0.5);
}
而对于IE ...
<!--[if IE]>
<style type="text/css">
.color-block {
background:transparent;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
zoom: 1;
}
</style>
<![endif]-->
就我个人而言，我会选择第一个选项，因为它没有麻烦。
如果你只是在寻找一个css解决方案，那么RGBA就是一条路。 对于无法使用RGBA的旧浏览器，可以使用纯色作为后备。
.stuff {
background-color: rgb(55, 55, 55);
background-color: rgba(55, 55, 55, 0.5);
}
您也可以在图片上回退：
.stuff2 {
background: transparent url(background.png);
background: rgba(0, 0, 0, 0.5) none;
}
这里是所有你需要得到这个工作在IE的所有邪恶版本：http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer
您最好的选择可能是使用半透明PNG作为背景，或者使用RGBa设置背景和边框的颜色。 如果您不介意制作宽度灵活的容器所需的额外标记，那么PNG将运行良好，但它们在IE6中也不受支持（如果这是个问题）。
RGBa在各种浏览器中的应用较少，但如果透明度仅用于视觉效果，那么它是使用渐进式增强的好地方。
对于RGBa，您需要添加一条额外的线作为回退：
#regForm {
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, 0.5);
border-color: rgb(24, 17, 12);
border-color: rgba(24, 17, 12);
}
任何不识别RGBa声明的浏览器都将简单地使用纯RGB。
跨越浏览器的RGB-CSS技巧文章
链接地址: http://www.djcxy.com/p/28079.html