时间戳

首页 > 解决方案 > 菜单按钮（位置：固定）可见性问题

html - 菜单按钮（位置：固定）可见性问题

问题描述

我对菜单按钮（位置：固定）颜色有疑问。我想让按钮文本颜色与背景相反，但找不到解决方案。

body {
  margin: 0;
}
.content {
  height: 100px;
  background-color: #0b1433;
}
.content:nth-child(2n) {
  background-color: #fff;
}

.menu {
  position: fixed;
  font-weight: 600;
  font-size: 24px;
  right: 1vw;
  top: 40%;
  writing-mode: tb-rl;
  border-right: 6px double #000;
}
<div class="main">
  <div class="menu">
    <span>MENU</span>
  </div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>

标签： htmlcss

解决方案

将您的样式更改.menu为此。

.menu {
  position: fixed;
  font-weight: 600;
  font-size: 24px;
  right: 1vw;
  top: 40%;
  writing-mode: tb-rl;
  border-right: 6px double #000;

  mix-blend-mode: difference; /* This will change the color */
  color: rgb(255, 255, 255);  /* Needs to be white if you want black text */
}

最后两个属性将为您提供所需的效果。

它会将菜单的颜色更改为与其下方背景相反的颜色。

推荐阅读