反应：背景图像与导航栏重叠

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*/
}