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

Question

I am making a hamburger menu as a component and fixed that is with the fixed property, this has the three lines of the menu characteristic these are white what I need is that when it is in a section that is white it changes to black, even I occupied the Methods for Contrasting Text Against Backgrounds but it did not work since for it to work the bg must be in the parent div of the component and not where I send it to call it, so if someone could help me how to make it change color or if there is already some npm of a hamburger that changes color with respect to the bg .我正在制作一个hamburger menu作为一个组件并固定它具有fixed属性，这具有菜单特征的三行这些是白色我需要的是当它在白色的部分时它变为黑色，即使我占用了将文本与背景进行对比的方法，但它不起作用，因为要使其工作， bg必须位于组件的父div中，而不是我发送它来调用它的位置，所以如果有人可以帮助我如何制作它改变颜色，或者如果已经有一些汉堡包的npm改变了bg颜色。

Also, it is necessary to take into account that in each different page it has a different bg and in all the pages I command to call the nav as a component.此外，有必要考虑到在每个不同的页面中它都有不同的bg并且在我命令的所有页面中将nav作为组件调用。

This would be my code on the menu occupied with nextjs with typescript这将是我在带有typescript nextjs占据的菜单上的代码

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;

styles:款式：

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)")};
  }
`;

Answer 1

I'm not sure there is an easy solution to check the background of an element and make changes.我不确定是否有一个简单的解决方案来检查元素的背景并进行更改。

I would use an intersection observer to check for each section and its background color.我会使用交叉点观察器来检查每个部分及其背景颜色。 Then apply the correct styles to the hamburger element.然后将正确的样式应用到汉堡包元素。 It's not as automated as an auto-contrast tool like you're talking about, but should be fairly easy to control and work with.它不像您所说的自动对比工具那样自动化，但应该很容易控制和使用。

Answer 2

If each of the hamburger menus are on their own page with different backgrounds, you can use CSS to style the menu per page.如果每个汉堡包菜单都位于具有不同背景的自己的页面上，您可以使用 CSS 为每页菜单设置样式。 What you can do is assign each page an id attached to the body and then call that ID and hamburger menu in CSS to style it.您可以做的是为每个页面分配一个附加到正文的 id，然后在 CSS 中调用该 ID 和汉堡菜单来设置它的样式。

Example:例子：

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

For page 2:对于第 2 页：

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

Then in the CSS:然后在 CSS 中：

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

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2021-07-20 15:30:05

解决方案2
0 2021-07-20 15:34:41

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2021-07-20 15:30:05

解决方案2 0 2021-07-20 15:34:41

解决方案1
0 已采纳 2021-07-20 15:30:05

解决方案2
0 2021-07-20 15:34:41