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而子节点是其中的一部分，因此尝试为子元素覆盖它不起作用，因为从技术上讲它们是不透明的。

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

Answer 1

您可以使用rgba()。

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

要使其在旧版Internet Explorer中运行，请使用CSS PIE。有some limitations，但这些是以向后兼容的方式处理的：RGB值将被正确渲染，不透明度将被忽略。

Answer 2

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

Answer 3

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

CSS不透明度和子元素

3 个答案: