如何将我的背景与“mix-blend-mode”隔离开来？

Question

我偶然发现了一个我似乎无法解决的问题。我目前正在使用 mix-blend-mode: difference 在我的汉堡包菜单上，这样我就可以实现在重叠时改变颜色的效果。

如此图所示：

虽然，我只希望它在黑白之间变化。不是黑色和背景之间的差异。

我的背景是一个移动的渐变，而不是图像。如下面的代码所示。

:root {
  background-color: #1d1128;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-height: 100vh;
  max-width: 100%;

  -webkit-animation: backgroundAnimation 35s ease-in-out infinite;
  -moz-animation: backgroundAnimation 35s ease-in-out infinite;
  animation: backgroundAnimation 35s ease-in-out infinite;
  background-size: 175% 175%;
  background-image: radial-gradient(
      ellipse at 70% 0,
      rgba(66, 4, 126, 0.7) 0,
      rgba(60, 31, 132, 0) 30%
    ),
    radial-gradient(
      circle at 90% 0,
      rgba(7, 244, 158, 0.5) 0,
      rgba(22, 148, 102, 0) 30%
    ),
    radial-gradient(
      ellipse at 0 0,
      rgba(66, 4, 126, 0.15) 0,
      rgba(60, 185, 174, 0) 40%
    ),
    radial-gradient(
      circle at 30% 100%,
      rgba(66, 4, 126, 0.7) 0,
      rgba(60, 31, 132, 0) 40%
    ),
    radial-gradient(
      ellipse at 10% 100%,
      rgba(7, 244, 158, 0.5) 0,
      rgba(22, 148, 102, 0) 40%
    ),
    radial-gradient(
      ellipse at 100% 100%,
      rgba(60, 185, 174, 0.15) 0,
      rgba(60, 185, 174, 0) 40%
    );
}

.hamburger-menu {
  position: absolute;
  mix-blend-mode: difference;
  right: 50px;
  top: 50px;
  z-index: 501;
}

我浏览了互联网，但没有找到任何可以帮助我的东西。我读了一些关于隔离的文章，但我认为这在这种情况下行不通。因为背景是写在正文里的。

先感谢您。

Answer 1

添加 background-color 属性并查看它的作用