有没有可能有一个不透明的背景层，它不会遮挡它的子层？
提问于 2009-10-14 02:26:03
假设我有这样的代码：
<!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>我希望我的“#菜单”是全彩色的，红色的。我试图通过将不透明度设置为1来移除继承，但它不起作用。我做错什么了吗？或者用这种方式根本不可能？
我也许可以在菜单之外做一个层，然后用z-index将它放在背景中，但是我正在寻找一种纯css的方法，而不需要修改我的xhtml。
谢谢
回答 4
Stack Overflow用户
回答已采纳
发布于 2009-10-14 02:44:42
如果对象是容器元素，则效果就像是使用掩码将容器元素的内容与当前背景混合在一起，其中掩码的每个像素的值是。
由于您的菜单是容器的内容，因此它还将应用容器不透明度。您唯一的选择是应用一个变通方法，这样从技术上讲，您的菜单不包含在div中。This article也描述了这样一种方法。
Stack Overflow用户
发布于 2009-10-14 02:56:24
不是的。将菜单放在容器之外将是正常的修复方法；如果您不能更改标记，另一种方法是完全避免不透明，而使用半透明的PNG作为容器背景(如果需要，可以为IE6提供适当的AlphaImageLoader修复)。
Stack Overflow用户
发布于 2009-10-14 03:00:47
由于您只想更改元素的背景，因此可以在支持的浏览器中使用rgba颜色(CSS3)。大多数不支持PNG的浏览器都可以处理半透明的PNG。
有关更完整的解释和一些示例代码，请参阅(明目张胆的自我推销) CSS 3: RGBA today。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/1565457
复制相关文章
![ASP.NET 2.0 中的异步页[来自MSDN]](https://ask.qcloudimg.com/http-save/yehe-1177036/s4211bob4p.gif)
腾讯云开发者
