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

如何显示在div内容与半的背景颜色，但不是文本值半透明的背景颜色，但不是文本

例子：

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

我想要显示的DIV背景半透明和文本通常是onmouseover事件。

我该怎么做。

来源

2009-10-29 Dhana

您可以给div一个.png transperent背景。 – 2009-10-29 09:22:30

这基本上是同样的问题，但有一些更好的答案： http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text – philfreo 2009-11-10 01:09:08

会是这样的工作？

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

IE6不能正确处理透明PNG没有DX过滤器。

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

来源

2009-10-29 09:19:34 Keith

不应该在该工作就好了：

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

鲍比

来源

2009-10-29 09:28:57 Bobby

或背景色：RGBA（255,0 ，0,0.5）; 更多：http://css-tricks.com/rgba-browser-support/ – pawel 2009-10-29 11:32:05

@pawel：很高兴，我总是忘了，CSS也有这样的功能。 – Bobby 2009-10-30 08:55:33

在IE6-8中不起作用 – philfreo 2009-11-11 17:54:03

你不能在一个半透明容器非透明的内容。内容继承父级的透明度。下面是分开的内容层和透明层的溶液。全部包裹在一个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>

来源

2009-10-29 16:01:59 Stoffe

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

回答

相关问题