Question

我想实现一种布局，其中菜单固定在页面的左下方。它持续滚动的一页，背景会变成各种颜色，菜单需要适应它。

实现布局的方法是通过执行类似的操作

<body>
  <nav>
    <ul>
      <li></li>
      ...
    </ul>>
  </nav>
  <div class="container1">
    ...
  </div>
  <div class="container2 black-bg">
    ...
  </div>
  <div class="container3">
    ...
  </div>
  <div class="container4 black-bg">
    ...
  </div>
</body>

css基本上将导航设置为固定在左下方。容器的宽度和高度为100vh，我使用类black-gb更改了背景

.navigation-menu {
  position:fixed;
  width: 370px;
  height: 100vh;
  bottom: 0;
  left: 0;
}
.container {
  display:flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
.black-bg {
  background-color:black;
}

我已经读到其中一些可以通过使用mix-blend-mode来实现，尽管到目前为止我还无法弄清楚。我希望使用纯CSS解决方案，而不打算完全支持IE。尽管如果您有其他方法，也将不胜感激。

谢谢！

更改背景时固定的菜单颜色

0 个答案: