如何创建一个带有非透明文本的透明div？

Question

我想要一个半不透明的div，里面填充的是完全不透明的文本。我的问题是，当我将div设为半不透明时，文本也是半不透明的。有没有办法让我的文本看起来像平常一样？

下面是我现在使用的内容：

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

Answer 1

不，没有。

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

Answer 2

IIRC，你得弄点小把戏

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

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/