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

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 {

  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 */

}

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

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

Answer 2

要根据背景颜色反转文本的颜色，请在类中使用filter: invert(1);和。 例子：mix-blend-mode: difference;.menu

.menu {

  position: fixed;

  font-weight: 600;

  font-size: 24px;

  right: 1vw;

  top: 40%;

  writing-mode: tb-rl;

  border-right: 6px double #000;

  filter: invert(1);

  mix-blend-mode: difference;

}

完整代码：

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

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;

  filter: invert(1);

  mix-blend-mode: difference;

}

代码笔： https: //codepen.io/marchmello/pen/ZEGNBWY