CSS不透明度和子元素 福娃{ 背景：#0000ff； 宽度：200px； 高度：200px； 不透明度：0.30； 过滤器：α（不透明度=30）； } 分区#foo>div{ 颜色：黑色； 不透明度：1； 过滤器：α（不透明度=100）； } 洛勒姆 乱数假文 多洛

在上面的示例中，

div#foo

的不透明性由子元素继承，导致文本几乎不可读。我认为说它是继承的是错误的，不透明度应用于父div，子div是其中的一部分，因此尝试为子元素重写它是无效的，因为从技术上讲，它们是不透明的

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

您可以使用

---

为了让它在旧的互联网上工作，探索者使用。有，但它们是以向后兼容的方式处理的：RGB值将正确渲染，不透明度将被忽略。

如果使用不透明度，则必须将它们放在单独的DIV中，然后将它们排列在一起。背景DIV的不透明度较低，前景DIV的内容不透明度为100%。

最好的方法是将透明png设置为背景。

我不久前写过以向后兼容的方式使用它：谢谢，我学到了一些东西！不幸的是，它在IE7中似乎不起作用。它是CSS3的一个特性。IE8是IE的第一个版本，被宣传为具有完整的CSS 2.1实现。在9.WOW版本之前，我不会期望有很多css3特性！我真不敢相信馅饼有多容易。我以前怎么没听说过这个？到目前为止，我只测试了一些东西，但一切似乎都运行得很好，而且非常简单：）干得好！有了这些和有条件的评论，我相信我可以停止说Internet Explorer的坏话：）RGBA颜色很好，但是如果你需要支持IE8，那么就使用这种方法。只需添加一个绝对定位的DIV作为问题DIV的第一个子级，并使用所需的不透明度设置（如果需要alpha混合，则添加背景图像）

<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
{
    background: rgba(0, 0, 255, 0.3);
}