固定位置导航栏

Question

我有一个导航栏，我想在我的网站上保持固定位置（顶部）。 我还希望导航栏有一些透明度。 我将透明度应用于导航栏，这也使得该div内的任何内容（子元素）也继承透明度。 因此，为了解决这个问题，我将相对位置应用于导航栏内的内容，但现在应该看起来固定的内容（在导航栏内）与页面内容的其余部分一起滚动。 我怎样才能解决这个问题？

小提琴

Answer 1

请不要在此情况下，使用不透明，使用RGBa为background的导航栏的background: rgba(0,0,0,.5); （和filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0F000000, endColorstr=#0F000000);对于IE 8及更早版本）。 所有的孩子都继承了opacity值，你无法做任何事情（除了将父母的opacity再次设置为1 ，在这种情况下你不再对父母进行半透明）。

演示 （更改回原始结构，导航容器和RGBa中的导航内容）

演示＃2 （使用当前结构和opacity ，将导航内容的位置更改为fixed ）

Answer 2

为什么不在CSS中为导航栏内的元素添加另一个透明度规则，以覆盖他们从栏中继承的那个？ 不需要更改位置属性，我不知道这将如何影响透明度。

Answer 3

您可以使用CSS伪选择器:children并将不透明度设置为1.这将使该元素的所有子元素都不透明。