Как отключить просмотр элементов через прозрачное меню - PullRequest
Новая
       6

Как отключить просмотр элементов через прозрачное меню

0 голосов
/ 06 ноября 2019

У меня есть сайт с градиентным фоном. На этом сайте у меня есть меню с наклейками сверху и под меню некоторый контент. Когда я прокручиваю содержимое вниз, оно отображается через меню. Я не хочу устанавливать тот же градиент, что и фону для элемента navbar, потому что тогда видно, что разница между navbars и фоном bodys. 

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>

1 Ответ

0 голосов
/ 06 ноября 2019

Я не вижу проблемы с использованием того же градиента. 

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>
...