我有一个渐变背景的网站。 在这个网站上，我有置顶菜单和菜单下的一些内容。 当我向下滚动时，可以通过菜单看到内容。 我不想为导航栏元素设置与背景相同的渐变，因为导航栏和正文背景之间的差异是可见的。
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>最佳答案
我没有发现使用相同渐变的问题。
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>关于javascript - 如何通过透明的置顶菜单禁用查看元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58733040/