我如何将我的背景图像放在Navbar的后面进行反应？

Question

我正在尝试将背景图像放在我的导航栏后面以做出反应。最终结果应如下所示：https://www.salient.com/。我尝试将导航栏背景设置为none和transparent，但两者均无法正常工作。我也尝试将背景图片和导航栏放在一个div中，但它们仍然是分开的。

这是我的主要“ App.js”文件：

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Router>
          <NavigationBar />
          <Switch>
              <Route exact path="/" component={Home} />
              <Route path="/projects" component={Projects} />
              <Route path="/contact" component={Contact} />
          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}

export default App;

[这是我的'Home.js'（我将App.js用于要在所有页面上使用的东西，并将单独的文件（例如'Home.js'）用于特定页面，这是非常新的功能，因此对所有人这个）：

class Home extends Component {
    render() {
        return (
            <div>
                (there was: <img src={background_image}> before the update. After the update I changed it to put it inside the NavigationBar)
            </div>
        );
    }
}

export default Home;

这是导航栏（“ NavigationBar”）：

nav.imageWrapper{
    position: relative;
}

nav.imageWrapper div.img { 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    max-height: 70vh;
    background-size: cover;
    background: '../images/background.jpg';
}

export const NavigationBar = () => (
    <Styles>
        <nav class="navbar navbar-light navbar-dark imageWrapper">
            <ul class="links">
                <li>
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li>
                    <a class="nav-link" href="/projects">Projects</a>
                </li>
                <li>
                    <a class="nav-link" href="/contact">Contact</a>
                </li>
            </ul>
        </nav>
        <div className="img" />
    </Styles>
)

当前，我的React应用看起来像this。

非常感谢您的帮助！

Answer 1

将这些样式用于您的图像及其包裹的div标签。它应该使它位于顶部您需要确保图像位于导航组件内部，以进行相应定位。

<nav class="navbar navbar-light navbar-dark imageWrapper">
            <ul class="links">
                <li>
                    <a class="nav-link" href="/">Home</a>
                </li>
                <li>
                    <a class="nav-link" href="/projects">Projects</a>
                </li>
                <li>
                    <a class="nav-link" href="/contact">Contact</a>
                </li>
            </ul>
            <div className="img"></div>
        </nav>


nav.imageWrapper{
    position: relative
}

nav.imageWrapper div.img { position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    max-height: 70vh;
    background-size: cover;
}