React：背景图像与导航栏重叠

Question

您好，我正在开发一个 React 项目。 在 App.js 中，

return (
  <HashRouter>
    <Route path="/about" component={About} />
    <Navigation />
  </HashRouter>
);

我在 about.js 中添加了背景图片

.background {
  background-image: url('../source/loyoalfree.jpg');
  /* Full height */
  height: 100%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

然后我仍然可以看到导航栏
但不能再点击导航栏了。
我认为背景图片覆盖了导航栏。
我该如何解决这个问题？

Answer 1

你应该为你的图片添加一个 z-index。

.image { 
  position: relative;
  z-index: -1;
  /* your remaining css*/
}