固定位置导航栏

Question

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

fiddle

Answer 1

在这种情况下不要使用不透明度，请使用RGBa导航栏background的{​​{1}}（以及IE 8及更早版本的background: rgba(0,0,0,.5);）。所有孩子都会继承filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#0F000000, endColorstr=#0F000000);值并且您无法对其进行任何操作（除了将父级opacity再次设置回opacity之外，在这种情况下您不会具有半透明度在父母身上）。

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

Demo#2（使用当前结构和1，将导航内容的位置更改为opacity）

Answer 2

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

Answer 3

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