如何完全覆蓋帶有背景 img 的 React 組件？

Question

我希望圖像覆蓋頁面的整個寬度和高度

注意：我沒有使用 Bootstrap。

這是登陸頁面組件

 import React, { Fragment } from 'react'
import { Link } from 'react-router-dom'
const Landing = () => {
    return (

      <Fragment>
        <div className=''>
          <div className="jumbotron jumbotron-fluid">
            <div className="jumbo container">
              <div className="row justify-content-center text-center">
                <div className="col-md-10 col-lg-6">
                  <h1 className="display-5">The Coolest Online storage of personal Information</h1>

                  <p className="lead">How you store contacts have never been more secure. Where you choose to work has impact on your productivity and creativity.</p>

                  <Fragment>
                    <ul>
                  <li><Link className="btn btn-primary btn-lg" role="button" to="/register">Get Started</Link></li>
                  </ul>
                  </Fragment>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Fragment>
    )
}
export default Landing

這是我的 App.js

const App = () => {
  return (
    <AuthState>
      <ContactState>
        <AlertState>
    
        <Router>
          <Fragment>
            <Navbar />
          
            <div className="container">
              <Alerts />
              <Switch>
              <Route exact path='/landing' component={Landing} />
                <PrivateRoute exact path='/' component={Home} />
                <Route exact path='/about' component={About} />

                <Route exact path='/register' component={Register} />
                <Route exact path='/login' component={Login} />
              </Switch>
            
            </div>
          </Fragment>
        </Router>

        </AlertState>
      </ContactState>
    </AuthState>
  )
}
export default App 

這是登陸頁面的樣式。

.jumbo {
  overflow: hidden;
  color: white;
}
.jumbotron {
  background-image: linear-gradient(rgba(78, 78, 78, 0.8), rgba(0, 0, 0, 0.8)), url('./img/hero.jpg');
  background-size: cover;
  position: relative;
  height: 89vh;
}

我希望圖像覆蓋整個頁面，因為它是一個登錄頁面。 我究竟做錯了什么？

我認為有一個容器類阻礙了它的工作。 但如果我刪除它，它會影響整個應用程序

  .container {
  max-width: 1100px;
  margin: auto;
  overflow: hidden;
  padding: 0 2rem;
}

Answer 1

在<div>父元素（要添加背景的地方）添加style={}屬性，在style={}執行以下操作：

{background: `url()`, backgroundSize: 'cover'}

Answer 2

您應該將背景圖片添加到大屏幕的父div 中，因為大屏幕的頂部、右側和左側似乎都有一些邊距。

.jumbotron-parent {
    background-image: linear-gradient(rgba(78, 78, 78, 0.8), rgba(0, 0, 0, 0.8)), url('./img/hero.jpg');
    background-size: cover;
    position: relative;
    height: 89vh;
    width: 100%;
}