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

Question

我不知道该怎么做：

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

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

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

想法？

Answer 1

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

Answer 2

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

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