Question

这是使窗口透明的CSS：

<style type="text/css">
.tooltip {
 background:#1C1C1C url(/tools/img/tooltip/black_arrow.png);
 font-size:12px;
 font-weight: bold;
 height:80px;
 width:250px;
 padding: 10px 0px 20px 20px;
 color:white; 
 filter:alpha(opacity=60);
 opacity:.6;
}
</style>

如何更改它以使文字不变透明？感谢

Answer 1

使用rgba代替您的背景而不是opacity属性：

background-color: rgba(28, 28, 28, 0.6);

当然这仅在现代浏览器中支持（在IE8及以下版本中严厉支持），因此您需要为IE8和7提供透明的png文件。

但是，你已经在这里使用了背景图片，所以事情变得有点棘手。看看你是否可以将当前背景图像分配给另一个元素，或其他东西，以摆脱那里的背景图像。

然后，你将不得不照顾IE6 - 它不支持透明png。使用DD_BelatedPNG或类似的脚本为IE6获取透明的png支持。

Modernizr.js可用于检测对rgba的支持，因此您的最终解决方案可能如下所示：

.tooltip {
   background-color: #565656;
}

.rgba .tooltip {
   background-color: rgba(28, 28, 28, 0.6);
}

.no-rgba .tooltip {
   background-color: transparent;
   background-image: url('transparent.png');
}

还有一些JavaScript：

if(!Modernizr.rgba){
     DD_belatedPNG.fix('.tooltip');
}

Answer 2

http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

非透明元素'内部'透明元素的真棒。

希望有所帮助：）

Answer 3

取消嵌套.tooltip容器中的文本。

<div class="container">
   <div class="tooltip"></div>
   <div class="text"></div>
</div>

使用.tooltip和.text的绝对定位来覆盖工具提示顶部的文本。我相对确定嵌套在不透明容器内的任何东西都会继承相同的不透明度。

我正在获得透明文本，我只想要透明背景如何修复它？

3 个答案: