CSS不透明度和子元素

Question

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

在上面的示例中，的不透明度div#foo由子元素继承，导致文本几乎变得不可读。我想说它是继承的是错误的，不透明度应用于父div，而子元素是其中的一部分，因此尝试从子元素覆盖它是行不通的，因为从技术上讲，它们是不透明的。

在这种情况下，我通常只使用alpha png背景图像，但是今天我想知道是否有更好的方法可以使div的背景半透明而不影响内容。

Answer 1

您可以使用rgba（）。

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

要使其在旧的Internet Explorer中工作，请使用CSSPIE。有一些限制，但是这些限制是以向后兼容的方式处理的：RGB值将正确呈现，并且不透明度将被忽略。