div中的文本，不透明度为0.5

Question

我有一个包含文本的div容器。

问题是我将容器设置为不透明度为0.5，我希望文本的不透明度为1，但由于div不能超过0.5。

我每个人都这么做，所以样式表中“p”被设置为1.0的不透明度，但是仍然不起作用。

有什么想法吗？

Answer 1

使用rgba()代替容器div来设置不透明度，因为opacity属性是由所有子元素继承的，甚至是文本节点，这意味着任何类型的后代都不能有更高的属性不透明度比其父

Answer 2

如果没有看到您的具体情况，很难说，但元素只能与其父元素一样不透明。

一个解决方案是让另一个div成为div的孩子，就像你现在拥有的那样。制作第二个div position: relative和透明的position: absolute; width: 100%; height: 100%;，它将在后台透明。主要div的其他孩子可以完全不透明。他们需要position: relative所以第一个div不会覆盖它们。

http://jsfiddle.net/ExplosionPIlls/ngW9m/1/

Answer 3

这似乎适用于我拥有的所有浏览器：

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