是否可以有一个不透明的不透明背景层？答案

【问题标题】：Is it possible to have an opacified background layer which doesn't opacify its children?是否可以有一个不透明的不透明背景层？
【发布时间】：2009-10-15 18:32:17
【问题描述】：

假设我有这个代码：

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Layers Opacity</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta name="robots" content="index,follow" />
        <style type="text/css">
            div#container
            {
                background-color: black;
                width: 200px;
                height: 400px;
                padding-top: 50px;
                            opacity: 0.5;
            }

            ul#menu
            {
                background-color: red;
                width: 150px;
                margin: 0 auto;
                            opacity: 1;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <ul id="menu">
                <li><a href="#"></a>Menu 1</li>
                <li><a href="#"></a>Menu 2</li>
                <li><a href="#"></a>Menu 3</li>
                <li><a href="#"></a>Menu 4</li>
                <li><a href="#"></a>Menu 5</li>
            </ul>
        </div>
    </body>
</html>

我希望我的“#menu”是全彩色的，红色。我试图通过将不透明度设置为 1 来删除继承，但它不起作用。我做错什么了吗？还是这种方式根本不可能？

我可以在我的菜单之外做一个图层，并使用 z-index 将它定位在背景中，但我正在寻找一种纯 css 的方式，而无需修改我的 xhtml。

谢谢

【问题讨论】：

标签： css xhtml opacity

【解决方案1】：

由于您只是尝试更改元素的背景，因此您可以在支持的浏览器中使用 rgba 颜色 (CSS 3)。大多数不支持它的浏览器都可以处理半透明的 PNG。

请参阅（公然自我推销）CSS 3: RGBA today 以获得更完整的解释和一些示例代码。

【讨论】：

【解决方案2】：

不。将菜单放在容器外是正常的解决方法；如果您无法更改标记，另一种方法是完全避免不透明并使用半透明 PNG 作为容器背景（必要时使用适用于 IE6 的 AlphaImageLoader 修复）。

【讨论】：

【解决方案3】：

来自specification：

如果对象是容器元素，那么效果就像内容一样容器元素的混合在当前背景下使用掩码其中每个像素的值面具是。

由于您的菜单是容器的内容，因此它也会应用容器的不透明度。您唯一的选择是应用一种解决方法，使您的菜单在技术上不包含在 div 中。 This article 也描述了这种方法。

【讨论】：

【解决方案4】：

我会使用透明 png 作为现代浏览器的背景图片和 IE6 中的过滤器，如本文所述：Cross Browser Background Transparency With CSS

【讨论】：