半透明的背景颜色，但不是文字
这个问题在这里已经有了答案：
会有这样的工作吗？
<div class="wrapper" style="position:relative;">
<div class="transparentBG" style="position:absolute;top:0;left:0;">Text</div>
<div class="overlay" style="position:absolute;top:0;left:0;">Text</div>
</div>
您可以通过每个班级的“：hover”版本来设置样式的变化。
尽管您可以通过多浏览器支持获得乐趣。
或者，您可以使用两个图像：
<style>
.transparentBGOnHover { background-image: url(../images/red.png); }
.transparentBGOnHover:hover { background-image: url(../images/transparentRed.png); }
</style>
<div class="transparentBGOnHover">
Text
</div>
没有DX过滤器，IE6无法正确处理透明PNG。
你可能还需要通过IE6和IE7的javascript处理悬停，因为它们不支持：正确悬停（尽管IE5.5发明了它）
不应该这样工作：
<div style="height:25px; background-color: #99FF0000;">
Content
</div>
鲍比
您不能在半透明容器中放置不透明的内容。 内容继承父级的透明度。 这是一个将内容层和透明层分开的解决方案。 全部包裹在一个div中，我使用：hover规则进行定位。
此解决方案仅在FF3.5.4中进行了测试，请注意，IE 6存在以下问题：将鼠标悬停在任何其他元素上，然后悬停在<A> 。
<style type="text/css">
.wrapper { position: relative; }
.background { background-color: red; width: 100px; height:25px; position: absolute; }
.content { width: 100px; height: 25px; position: absolute; z-index: 2; color: #fff; }
.wrapper:hover .background { opacity: 0.25; }
.wrapper:hover .content { color: #000; }
</style>
<div class="wrapper">
<div class="content">Text</div>
<div class="background"></div>
</div>