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

Question

我试图让透明 div 内的文本没有不透明度，也就是完全黑色:

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

这可能只使用 CSS 吗？

提前致谢

Answer 1

最简单的方法是使用不透明度/alpha 设置父 div 的背景样式:

div  {
    background: #fff; /* for browsers that don't understand the following rgba rule */
    background-color: rgba(255,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 方法。