如何使用非透明文本的透明div？

Question

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

以下是我现在正在使用的内容：

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

Answer 1

IIRC，你必须变得棘手。

基本上，您想要创建半透明div，为空。然后将你的文本放在另一个div中并将其定位，使其位于第一个div之上。

Answer 2

不，没有。

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

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

Answer 4

你可以使用2个DIV（他们都不是孩子）。底部分层DIV将是半透明的，顶部分层DIV将用于保存文本。