时间戳

首页 > 解决方案 > 如何使用 reactJS 和 css 在全屏背景中显示图像？

javascript - 如何使用 reactJS 和 css 在全屏背景中显示图像？

问题描述

我正在尝试将背景图像添加到我的反应应用程序项目中。我想在所有页面中显示图像，但是对于每个页面，图像都没有全屏显示，有一个空白区域。这是 App.js 的 css

.background-image {
  background-image: url(./assets/space-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
  width: 100%;

}

我的 App.js 就像：

render() {
    return (
        <Router>
          <Container className="p-0 background-image" fluid={true}>
            <Navbar bg="transparent" expand="lg">
              <Navbar.Brand style={{color: 'white'}} >Schoninger Jimmy</Navbar.Brand>
              <Navbar.Toggle className="border-0" aria-controls="navbar-toggle"/>
              <Navbar.Collapse id="navbar-toggle">
                <Nav className="ml-auto">
                  <Link className="nav-link" to="/"  style={{color: 'white'}} >Home</Link>
                  <Link className="nav-link" to="/about" style={{color: 'white'}}>About</Link>
                  <Link className="nav-link" to="/contact" style={{color: 'white'}}>Contact</Link>
                </Nav>
              </Navbar.Collapse>
            </Navbar>

            <Route path="/" exact render={() => <HomePage title={this.state.home.title} />} />
            <Route path="/about"  render={() => <AboutPage title={this.state.home.title} />} />
            <Route path="/contact"  render={() => <ContactPage title={this.state.home.title} />} />
          </Container>
        </Router>

    );
  }

在此处输入图像描述

编辑：我将这些添加到 css

.background-image {
  background-image: url(./assets/space-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  height: 100vh; 
  width: 100vw;
  background-position: center; 

}

现在背景还是很奇怪

在此处输入图像描述

标签： javascripthtmlcssreactjsreact-bootstrap

解决方案

我认为这个 CSS 样式代码可以帮助你：

.background-image {
    background-image: url(./assets/space-bg.jpg);
    background-size: cover;
    background-position: top;
    min-height: 100%;
    height: 100vh;
    position: relative;
}

推荐阅读