布尔玛起反应，Navbar具有白色背景，我希望“家”的身体背景成为其背景，我该怎么办？

Question

您可能已经读过，我希望身体的背景成为导航栏的背景，我该怎么做呢？我尝试了z索引和定位的不同方法，然后疯狂地搜索了一下，现在经过2个小时了解决后，请帮助我，下面是该页面以及主文件和导航栏文件的外观图片

我正在使用React。

Navbar.css

@media screen and (min-width: 1024px){
 .navbar-center {
    display:flex;
    justify-content: space-around;
    flex-grow: 1;
    flex-shrink: 0;
    flex-direction: row;
 }
 .navbar-link, .navbar-item {
    align-items: center;
    display: flex;
    flex-basis: auto;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: space-around;
 }
}

.navbar-center a {
   transition: all .4s;
   font-weight: bold;
}

.navbar-center a:hover {
   box-shadow: .01rem .01rem .5rem black;
   padding: 0rem 1.2rem;
   transform: translate(0rem, -.4rem) scale(1.1, 1.1);
}

.navbar-center a:active {
   transform: translate(0rem, .2rem) scale(.5, .5);
   box-shadow: .01rem .01rem .5rem black;
   padding: 0rem 1.2rem;
}

Navbar.js

import React, {useState} from 'react';
import {Link} from "react-router-dom";
import "./Navbar.css";

const Navbar = () => {

    const [active,
        setActive] = useState(false);

    const handleClick = () => {
        setActive(!active)
    }

    return (
        <nav class="navbar" role="navigation" aria-label="main navigation">
            <div class="navbar-brand">
                <Link class="navbar-item" href="https://bulma.io">
                    <img
                        src="https://bulma.io/images/bulma-logo.png"
                        alt="Logo"
                        width="130"
                        height="35"/>
                </Link>

                <Link
                    onClick={handleClick}
                    active={active}
                    role="button"
                    className={active
                    ? "navbar-burger burger is-active"
                    : "navbar-burger burger"}
                    aria-label="menu"
                    aria-expanded="false"
                    data-target="navbarBasicExample">
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                    <span aria-hidden="true"></span>
                </Link>
            </div>

            <div
                onClick={handleClick}
                active={active}
                className={active
                ? "navbar-menu is-active"
                : "navbar-menu"}>
                <div class="navbar-center">
                    <Link exact to="/"
                        class="navbar-item button is-normal is-light">Home</Link>
                    <Link exact to="/about"
                        class="navbar-item button is-normal is-light">About</Link>

                    <Link exact to="/projects"
                        class="navbar-item button is-normal is-light">Projects</Link>
                    <Link exact to="/contact"
                        class="navbar-item button is-normal is-light">Contact</Link>
                </div>
            </div>
        </nav>

    )

}

export default Navbar;

Home.css

body {
    background: linear-gradient(to right bottom, rgba(74, 173, 173, 0.561), rgba(0, 0, 0, 0.712), rgba(136, 32, 32, 0.589), rgba(0, 0, 0, 0.712), rgba(14, 14, 116, 0.561));
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100%;
    background-blend-mode: overlay;
}

Home.js

import React from 'react';
import "./Home.css";

const Home = () => {
    return (
        <div className="home">

        </div>
    );
}

export default Home;