CSS不透明度和子元素

Question

<style type="text/css">
div#foo {
    background: #0000ff;
    width: 200px;
    height: 200px;

    opacity: 0.30;
    filter: alpha(opacity = 30);
}
div#foo>div {
    color: black;
    opacity:1;
    filter: alpha(opacity = 100);
}
</style>

<div id="foo">
    <div>Lorem</div>
    <div>ipsum</div>
    <div>dolor</div>
</div>

在上面的例子中，div#foo的不透明度由子元素继承，导致文本变得几乎不可读。我想这是错误的说法它是继承，不透明度应用于父DIV和孩子们的那部分，因此试图重写它的子元素不工作，因为他们在技术上是不透明的。

我通常只使用在这种情况下的阿尔法PNG背景图片，但今天，我不知道是否有更好的方法，使一格的背景半透明的，而不会影响内容。

Answer 1

您可以使用 RGBA（）。

div#foo
{
    background: rgba(0, 0, 255, 0.3);
}

要使它在旧互联网探索者工作使用 CSS PIE 。有一定的局限性的，但这些都是后向兼容的方式处理：在RGB值将被正确地呈现和不透明度将被忽略。

Answer 2

的最佳方法是透明PNG设置为背景..

Answer 3

如果您使用的透明度，你必须把它们放在不同的DIV的，然后在一起排队。背景DIV将具有较低的不透明度，和前景DIV将具有100％的不透明度您的内容。