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

Posted 2023-02-22

【中文标题】如何使用 reactJS 和 css 在全屏背景中显示图像？

【英文标题】：How to display an image in full screen background using reactJS and css?

【发布时间】：2020-07-31 03:24:38

【问题描述】：

我正在尝试将背景图片添加到我的 react 应用项目中。 我想在所有页面中显示图像，但是对于每个页面，图像都没有全屏显示，有一个空白区域。 这是 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>

    );
  

enter image description here

编辑： 我将这些添加到 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; 

现在背景还是怪怪的

【问题讨论】：

html 和 body 是 100% 的高度吗？你也可以使 div 位置：绝对。

哪个 div ？容器？它是一个 react_bootstrap 组件，我希望它们对移动设备友好。

我认为您的代码中缺少位置也可以尝试 vw vh background-image background-image: url(./assets/space-bg.jpg);背景尺寸：封面；背景重复：不重复；背景位置：中心；高度：100vg；宽度：100vw：位置：绝对；

@arslan 谢谢我已经尝试将这些缺失的属性放到容器 css 中，但它显示了另一个问题。查看问题中的编辑

@arslan 如果屏幕向下滚动，则背景不适应其大小

【参考方案1】：

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

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