我得到透明文本，我只想要透明背景如何解决？答案

【问题标题】：I'm getting transparent text and I only want transparent background how do I fix it?我得到透明文本，我只想要透明背景如何解决？
【发布时间】：2010-12-23 03:32:18
【问题描述】：

这是使窗口透明的 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>

如何更改它以使文本不透明？谢谢

【问题讨论】：

标签： css styles

【解决方案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');
}

【讨论】：

【解决方案2】：

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

在“内部”透明元素中的非透明元素上非常棒..

希望有帮助:)

【讨论】：

【解决方案3】：

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

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

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

【讨论】：