我怎么才能把我的背景图片放在react的导航栏后面呢？

Question

我正试着在react中的导航栏后面放一个背景图片。最终结果应该类似于：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;

这是导航栏("NavigationBar")：

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

将这些样式用于您的图像及其包装的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 (检查此示例)

Answer 2

本地图像导入在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上阅读更多。