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

Question

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

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>

Answer 1

将您的样式更改.menu为此。.menu {&nbsp; position: fixed;&nbsp; font-weight: 600;&nbsp; font-size: 24px;&nbsp; right: 1vw;&nbsp; top: 40%;&nbsp; writing-mode: tb-rl;&nbsp; border-right: 6px double #000;&nbsp; mix-blend-mode: difference; /* This will change the color */&nbsp; color: rgb(255, 255, 255);&nbsp; /* Needs to be white if you want black text */}最后两个属性将为您提供所需的效果。它将把菜单的颜色更改为与其下方的背景颜色相反的颜色。

Answer 2

要根据背景颜色反转文本的颜色，请在类中使用filter: invert(1);和。 例子：mix-blend-mode: difference;.menu.menu {&nbsp; position: fixed;&nbsp; font-weight: 600;&nbsp; font-size: 24px;&nbsp; right: 1vw;&nbsp; top: 40%;&nbsp; writing-mode: tb-rl;&nbsp; border-right: 6px double #000;&nbsp; filter: invert(1);&nbsp; mix-blend-mode: difference;}完整代码：<div class="main">&nbsp; <div class="menu">&nbsp; &nbsp; <span>MENU</span>&nbsp; </div>&nbsp; <div class="content"></div>&nbsp; <div class="content"></div>&nbsp; <div class="content"></div>&nbsp; <div class="content"></div>&nbsp; <div class="content"></div>&nbsp; <div class="content"></div></div>body {&nbsp; margin: 0;}.content {&nbsp; height: 100px;&nbsp; background-color: #0b1433;}.content:nth-child(2n) {&nbsp; background-color: #fff;}.menu {&nbsp; position: fixed;&nbsp; font-weight: 600;&nbsp; font-size: 24px;&nbsp; right: 1vw;&nbsp; top: 40%;&nbsp; writing-mode: tb-rl;&nbsp; border-right: 6px double #000;&nbsp; filter: invert(1);&nbsp; mix-blend-mode: difference;}代码笔： https:&nbsp;//codepen.io/marchmello/pen/ZEGNBWY