如何通过透明的置顶菜单禁用查看元素

Question

我有一个渐变背景的网站。在这个网站上，我有置顶菜单和菜单下的一些内容。当我向下滚动时，可以通过菜单看到内容。我不想为导航栏元素设置与背景相同的渐变，因为导航栏和正文背景之间的差异是可见的。

body {
  background: transparent linear-gradient(123deg, #76FCFF 0%, #F966F8 52%, #E8BBA2 100%) 0% 0% no-repeat padding-box;
  background-attachment: fixed;
}
nav {
  position: sticky;
  top: 0
}
.content {
  background-color: #ffffff;
  margin: 0px 10px;
  box-shadow: 0px 3px 10px #38383880;
}

<body>
<nav>Navbar content</nav>
<div class="content">
<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content<br>Content
</div>
</body>

Answer 1

我没有发现使用相同渐变的问题。

body, html {
    margin: 0;
    padding: 0;
}

body, nav {
    background: transparent linear-gradient(123deg, #76FCFF 0%, #F966F8 52%, #E8BBA2 100%) 0% 0% no-repeat padding-box;
    background-attachment: fixed;
}

nav {
    position: sticky;
    top: 0;
}

.content {
    background-color: #ffffff;
    margin: 0px 10px;
    min-height: 120vh;
}

<nav>Navbar content</nav>
<div class="content">
    <p>
    Content
    </p>
</div>

如何通过透明的置顶菜单禁用查看元素

How to disable see elements trough transparent sticky-top menu

html

javascript

css

navbar