html – 使用CSS覆盖透明div中的不透明文本

我试图让透明的div里的文字没有透明度,也就是说完全是黑色的：

<div style="opacity:0.6;background:#3cc;">
    <p style="background:#000;opacity:1">This text should be all black</p>
</div>

这可能只与CSS有关吗？

提前致谢

解决方法

最简单的方法是用不透明度/ alpha来设置父div的背景：

div  {
    background: #fff; /* for browsers that don't understand the following rgba rule */
    background-color: rgba(255,255,0.5); /* rgb,white,with alpha at 0.5 */
}

但是,这并不是与IE兼容的.

对于IE> = 7兼容性,您可以使用：

div  {
    background-image: url('path/to/partially_transparent.png');
    background-position: 0 0;
    background-repeat: repeat;
}

我记得IE 7有一个专有的过滤器选项,但我恐怕不记得它是如何工作的.所以我省略了任何描述/展示的尝试.如果我可以找到一个有用的参考,但稍后我会添加它.

如easwee所述,不透明度由包含的元素继承,这就是为什么不能覆盖它,这就是为什么我更喜欢使用background-color / background-image方法.