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

Posted 2023-02-23

【中文标题】带有 React JS Div 和组件的全屏背景图像

【英文标题】：Fullscreen Background Image with React JS Div and Component

【发布时间】：2021-09-30 23:53:58

【问题描述】：

我确信答案就在我面前，但我已经搜索了好几个小时，但始终无法找到解决办法。我想知道如何让我的背景图像填满整个屏幕。它填满了屏幕的大部分，除了标题所在的位置。只有当我注释掉“表单”组件时，我才能获得全屏背景图像。当我去检查未填充的部分时，它说它显示为 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;

【问题讨论】：

你能让className app的div有背景图片而不是一些随机的div吗？我认为这会填满整个背景。

@sidc 您的解决方案是正确的。谢谢！

【参考方案1】：

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

【讨论】：

我也试过了，但是没有用。看起来 sid c 有解决方案。谢谢