固定位置導航欄

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.這將使該元素的所有子元素都不透明。