使导航栏下滚动的内容不可见但栏具有透明度的方法

Question

我不知道如何解决这个问题：

我有一个全屏幕背景图片，一个50％透明度固定在顶部的导航栏，以及它下面的内容。如何让导航栏在背景图像上保持透明度，并且仍然具有滚动内容？

现在的问题是，当我向下滚动时，内容会在导航栏下方显示，并通过透明度显示，这显然看起来很糟糕。

基本上，我希望页面内容滚动并消失在导航栏的底部。我知道我可以使导航栏不透明并使用背景图像，但我宁愿只有一个全屏背景图像。

思想？

Answer 1

将内容放在具有固定大小的块（div）中，例如将其拉伸到整个页面，但导航栏的大小除外。然后使用css属性overflow:scroll

使该div可滚动

Answer 2

我知道这已经很老了，但是我花了很多时间寻找答案，并且找到了一个好的解决方案，因此我会将其发布给其他正在寻找它的人。

将导航栏放置在包含背景图像的元素中，并将导航栏的背景设置为继承。这样可以防止在向下滚动时内容出现在导航栏的后面。