如何有一个带有非透明文本的透明 div？答案

【问题标题】：How do I have a transparent div with NON transparent text?如何有一个带有非透明文本的透明 div？
【发布时间】：2010-09-12 14:20:02
【问题描述】：

我想要一个半透明的 div 填充完全不透明的文本。我的问题是，当我使 div 半透明时，文本也是半透明的。有没有办法让我的文本正常显示？

下面是我现在使用的：

.opac
{
    opacity:.2;
    background-color:black; 
}

【问题讨论】：

标签： html css

【解决方案1】：

不，没有。

要么使用半透明的 24 位 PNG 为不透明元素创建半透明背景，要么将两个元素叠加在一起。

【讨论】：

有一种方法，只是现在还没有得到很好的支持，但可能在几年后：给背景一个rgba() 值。
@BoltClock 是一只独角兽：是的，CSS 3 中有很多有用的东西，但是我们仍然在为 IE 6 用户苦苦挣扎，所以我们需要一段时间才能获得足够的 IE 6， IE 7 和 IE 8 用户升级到 IE 9...
是的，我只是指出有办法。我仍然认识到我们的旧浏览器支持问题:)

【解决方案2】：

IIRC，你必须变得狡猾。

本质上，您想创建半透明的 div，为空。然后将您的文本放在另一个 div 中并将其放置在第一个 div 之上。

【讨论】：

我已经使用了我的每日投票津贴，但是这个解决方案绝对值得一个 - 虽然这种方法存在问题 - 例如，你可能有一堆你想要放置的动态文本在你的透明 div 里面，不知道让你的 div 有多高 - 我可以想到三种方法来解决这些问题 1）使用表格，2）JavaScript， 3）我知道这完全是一个糟糕的想法，但你可以渲染你的文本两次，一次在 div 内，然后一次在它之外，确保你将最初位于 div 内的文本放置在屏幕外，以便只有不透明的文本是见过
@stephenmurdoch - 聪明的想法，#3。您也可以将半透明 div 中的文本颜色设置为与 div 的背景颜色相同的颜色。应该对用户不可见，因为 opaque-text div 位于顶部。

【解决方案3】：

即使已经回答了这个问题，这里还有一个不需要图像但需要 jQuery 的选项。

jQuery

var c = $('#container');
$('#transparent').css({
    width: c.outerWidth(),
    height: c.outerHeight(),
    top: c.offset().top,
    left: c.offset().left
});

CSS

#transparent {
    background-color: black;
    position: absolute;
    z-index:-1;
    opacity: 0.2;
}

HTML

<div id='container'>
Text
<div/>
<div id='transparent'>
</div>

试试看

http://jsfiddle.net/yEmUn/

【讨论】：

【解决方案4】：

您可以使用 2 个 DIV（它们都不是子级）。底层 DIV 将是半透明的，顶层 DIV 将用于保存文本。

【讨论】：