带有 React JS Div 和组件的全屏背景图像

Question

我确信答案就在我面前，但我已经搜索了好几个小时，但始终无法找到解决办法。我想知道如何让我的背景图像填满整个屏幕。它填满了屏幕的大部分，除了标题所在的位置。只有当我注释掉“表单”组件时，我才能获得全屏背景图像。当我去检查未填充的部分时，它说它显示为 html，我怀疑它是从公共文件夹中的 index.html 文件中提取的。对于这方面的任何帮助，我将不胜感激。

App.js

import React from 'react';
import './App.css';
import Form from './Form';
import wallstreet from './images/wallstreet.png';

function App() {
  return (
    <div className="App">
      <div className="overlay"
      style={{backgroundImage: `url(${wallstreet})`}} />
            <Form />
    </div>
  );
}

export default App;

App.css

@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'PT Sans', sans-serif;
}

.overlay {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Form.js

import React, { useState } from 'react';
import FormSignup from './FormSignup';
import FormSuccess from './FormSuccess';
import './Form.css';

const Form = () => {
    const [isSubmitted, setIsSubmitted] = useState(false)

    function submitForm() {
        setIsSubmitted(true);
    }
    return (
        <>
<div className="form-container">
    <span className="close-btn">x</span>
    <div className="form-content-left">
    <img className='form-img' src='images/bullish.png' alt='bullish' />
    </div>
    {!isSubmitted ? (<FormSignup submitForm=
            {submitForm} />) : <FormSuccess />}
</div>
        </>
    );
};

export default Form;

Form.css

.form-container {
    margin: 100px auto;
    width: 1000px;
    box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 0 7px 20px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    border-radius: 10px;
    height: 600px;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  
  .close-btn {
    position: absolute;
    top: 2%;
    right: 3%;
    font-size: 1.5rem;
    z-index: 1;
    color: #fff;
    cursor: pointer;
  }
  
  .form-content-left {
    background: linear-gradient(
      90deg,
      rgb(39, 176, 255) 0%,
      rgb(0, 232, 236) 100%
    );
    border-radius: 10px 0 0 10px;
    position: relative;
  }
  
  .form-img {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .form-img-2 {
    width: 60%;
    height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .form-success {
    text-align: center;
    font-size: 24px;
    margin-top: 80px;
    color: #fff;
  }
  
  .form-content-right {
    border-radius: 0 10px 10px 0;
    position: relative;
    background: linear-gradient(90deg, rgb(40, 40, 40) 0%, rgb(17, 17, 17) 100%);
  }
  
  .form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  .form h1 {
    font-size: 1rem;
    text-align: start;
    width: 80%;
    margin-bottom: 1rem;
    color: #fff;
  }
  
  .form-inputs {
    margin-bottom: 0.5rem;
    width: 80%;
  }
  
  .form-inputs p {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    color: #f00e0e;
  }
  
  .form-label {
    display: inline-block;
    font-size: 0.8rem;
    margin-bottom: 6px;
    color: #fff;
  }
  
  .form-input {
    display: block;
    padding-left: 10px;
    outline: none;
    border-radius: 2px;
    height: 40px;
    width: 100%;
    border: none;
  }
  
  .form-input::placeholder {
    color: #595959;
    font-size: 12px;
  }
  
  .form-input-btn {
    width: 80%;
    height: 50px;
    margin-top: 10px;
    border-radius: 2px;
    background: linear-gradient(
      90deg,
      rgb(39, 176, 255) 0%,
      rgb(0, 232, 236) 100%
    );
    outline: none;
    border: none;
    color: #fff;
    font-size: 1rem;
  }
  
  .form-input-btn:hover {
    cursor: pointer;
    background: linear-gradient(
      90deg,
      rgb(39, 143, 255) 0%,
      rgb(12, 99, 250) 100%
    );
    transition: all 0.4s ease-out;
  }
  
  .form-input-login {
    font-size: 0.8rem;
    margin-top: 10px;
    color: #fff;
    width: 80%;
    text-align: center;
  }
  
  .form-input-login a {
    text-decoration: none;
    color: #27cdff;
    font-weight: 6

00; }

Answer 1

您是否尝试过 100vh 和 100vw 以及绝对位置。 还搜索是否有任何父元素具有相对位置