【发布时间】：2012-07-23 10:04:32
【问题描述】：
我有一个导航栏，我想在我的网站上保持在固定位置（顶部）。我还希望导航栏有一些透明度。我将透明度应用于导航栏，这也使得该 div 内的任何内容（子元素）也继承了透明度。所以，为了解决这个问题，我对导航栏内的内容应用了相对位置，但现在应该固定显示的内容（导航栏内）随着页面内容的其余部分滚动。我该如何解决这个问题？
【问题讨论】：
-
改用透明背景图片..
【发布时间】：2012-07-23 10:04:32
【问题描述】：
在这种情况下不要使用不透明度，请使用RGBa 导航栏background 的background: rgba(0,0,0,.5);（以及filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0F000000, endColorstr=#0F000000); 用于IE 8 和更早版本）。所有子级都继承了opacity 值，对此您无能为力（除了将父级的opacity 再次设置回1，在这种情况下，父级将不再具有半透明性）。
Demo（改回原来的结构，导航容器内有导航内容和RGBa）
Demo#2（使用当前结构和opacity，将导航内容的位置更改为fixed）
【讨论】：
-
其实已经不是小孩了。
-
IE8 及更早版本不支持，您可以使用渐变滤镜来达到与 RGBa 完全相同的效果。
-
最好使用透明图片作为背景
-
为什么？这是 2012 年，而不是 2008 年。除了 IE8 和更早版本，您有过滤器选项可以帮助您获得相同的结果，RGBa 具有出色的支持，并且至少两年来一直是比图像更好的解决方案。图像意味着另一个请求。 RGBa 只是 CSS 中的一行。
-
@Matt：我在想你可以回到原来的结构，在
#nav-container内加上#nav-content（这也更有意义）结合半透明背景。如果您希望保留当前结构，只需将position: relative更改为position: fixed即可解决滚动问题。但是，正如我之前所说，将内容放在容器内而不是与其相邻会更有意义。
为什么不在导航栏内的元素的 CSS 中添加另一个透明度规则，以覆盖它们从导航栏继承的规则？不需要更改 position 属性，我看不出这会如何影响透明度。
【讨论】：
您可以使用 CSS 伪选择器 :children 并将不透明度设置为 1。这将使该元素的所有子元素不透明。
【讨论】：