Question

如何使用半背景颜色显示div内容，但不显示文本值

示例：

<div style="height:25px; background-color: red;">
 Content 
</div>

我希望在onmouseover事件中将div背景显示为半透明和正常文本。

我该怎么做。

Answer 1

这样的事情会起作用吗？

<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。

你可能还需要通过javascript为IE6和IE7处理悬停，因为他们不支持：正确悬停（尽管IE5.5发明了它）

Answer 2

这不应该没问题：

<div style="height:25px; background-color: #99FF0000;">
 Content 
</div>

巴比

Answer 3

您不能在半透明容器中使用不透明的内容。内容从父级继承透明度。这是一个分离内容层和透明层的解决方案。所有内容都包含在一个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>

半透明背景颜色，但不是文本

3 个答案: