根据部分的背景更改汉堡菜单的颜色答案

【问题标题】：change color of burger menu depending on the background of the section根据部分的背景更改汉堡菜单的颜色
【发布时间】：2021-09-28 02:48:46
【问题描述】：

我正在制作一个hamburger menu 作为组件并使用fixed 属性进行修复，这具有菜单特征的三行这些是白色的我需要的是当它位于白色部分时它变成黑色，即使我占用了Methods for Contrasting Text Against Backgrounds，但它没有工作，因为它工作bg必须在组件的父div中，而不是我发送它调用它的地方，所以如果有人可以帮助我如何使它改变颜色，或者如果已经有一些汉堡包的npm 相对于bg 改变颜色。

另外，有必要考虑到，在每个不同的页面中，它都有不同的bg，并且在我命令的所有页面中都将nav 作为一个组件调用。

这将是我在nextjs 和typescript 占用的菜单上的代码

import { StyledHamburger } from "./Hamburger.styled";

export type Props = {
  open: boolean;
  setOpen: (v: boolean) => void;
};

const Hamburger = (props: Props) => (
  <StyledHamburger open={props.open} onClick={() => props.setOpen(!props.open)}>
    <div />
    <div />
    <div />
  </StyledHamburger>
);

export default Hamburger;

风格：

import styled from "styled-components";

import { colors } from "../global";

export const StyledHamburger = styled.button<{ open: boolean }>`
  position: fixed;

  width: 2rem;
  height: 2rem;
  padding: 0;
  background: transparent;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;

  border: none;
  cursor: pointer;
  outline: none;
  z-index: 2;

  div {
    position: relative;
    width: 2rem;
    height: 0.25rem;
    border-radius: 0px;
    transition: all 0.3s linear;
    transform-origin: 1px;
    background-color: ${({ open }) =>
      open ? colors.pearl : colors.pearl};

    :first-child {
      transform: ${({ open }) => (open ? "rotate(45deg)" : "rotate(0)")};
    }

    :nth-child(2) {
      opacity: ${({ open }) => (open ? "0" : "1")};
      transform: ${({ open }) => (open ? "translateX(20px)" : "translateX(0)")};
    }

    :nth-child(3) {
     
      transform: ${({ open }) => (open ? "rotate(-45deg)" : "rotate(0)")};
    }
  }
  p {
    position: relative;
    border-radius: 0px;
    transition: all 0.3s linear;
    transform-origin: 1px;
    background-color: ${({ open }) =>
      open ? colors.pearl : colors.pearl};
      transform: ${({ open }) => (open ? "translateX(20px)" : "translateX(0)")};
  }
`;

【问题讨论】：

标签： javascript html css reactjs next.js

【解决方案1】：

我不确定是否有简单的解决方案来检查元素的背景并进行更改。

我会使用intersection observer 来检查每个部分及其背景颜色。然后将正确的样式应用于汉堡元素。它不像您所说的自动对比工具那样自动化，但应该很容易控制和使用。

【讨论】：

【解决方案2】：

如果每个汉堡菜单都在各自不同背景的页面上，您可以使用 CSS 来设置每个页面的菜单样式。您可以做的是为每个页面分配一个附加到正文的 ID，然后在 CSS 中调用该 ID 和汉堡菜单来设置它的样式。

例子：

<body id="homepage">
<nav class="hamburger">
</body>

对于第 2 页：

<body id="about-us">
<nav class="hamburger">
</body>

然后在 CSS 中：

#homepage .hamburger {
your styles
}
#about-us .hamburger {
your styles
}

【讨论】：