css - 不透明度为 0.5 的 div 中的文本

Question

我有一个 div 容器，里面有文本。

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

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

有任何想法吗？

Answer 1

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

Answer 2

没有看到你的具体情况很难说，但一个元素只能和它的父元素一样不透明。

一种解决方案是让另一个 div 是 div 的子级，它的行为就像您现在拥有的那样。制作第二个divposition: 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/