我怎么能把我的背景图片放在导航栏后面做出反应？

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 或Project.js 等单独文件用于特定页面，非常新的反应所以我是新手所有这些）：

class Home extends Component {
    render() {
        return (
            <div>
                (putting an image here puts the image under the nav bar, not as a background image)
            </div>
        );
    }
}

export default Home;

这是导航栏（“导航栏”）：

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>
    </Styles>
)

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

非常感谢任何类型的帮助/建议！

Answer 1

由于捆绑方式的不同，本地图像导入在 React 中的工作方式有所不同。此处的图像可能无法正确加载。我建议将导入更改为如下所示：

nav.imageWrapper div.img { 
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  max-height: 70vh;
  background-size: cover;
  background-image: url('../images/background.jpg'); //replace background, wrap in URL reference
}

如果您也无法直接导入图像，您可以在this discussion 阅读更多内容。

Answer 2

将这些样式用于您的图像及其包装的 div 标记。它应该使它位于顶部 您需要确保 Image 在 nav 组件内以相应地定位它。

<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;
background: url('../images/background.jpg');
z-index: -1
}

https://stackblitz.com/edit/react-kliqc3?file=index.js（查看此示例）