如何在反应中制作图像覆盖的背景

Question

我有一张图片，我需要让它覆盖所有背景。

问题是，由于某种原因，图像没有覆盖所有背景，它总是停在我放置另一个对象的地方，并且永远不会比这个更远。

我正在使用 material ui，我的代码如下所示

import { Image } from "../images";
import { TextField } from "@mui/material";

const useStyles = makeStyles({
Background: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    justifyItems: "center",
    flexDirection: "row-reverse",
    width: "100%",
    height: "100%",
    backgroundImage:  `url(${Image})`,
    backgroundSize: "cover",
    backgroundRepeat: 'no-repeat',
    backgroundPosition: '50% 10%',
  }
})

function Login() {
  const classes = useStyles();

  return (
    <div className={classes.Background}>
       <TextField></TextField>
    </div>
  );
}

这是我得到的结果：

Answer 1

试试这个风格

Background: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    justifyItems: "center",
    flexDirection: "row-reverse",
    width: "100%",
    height: "100vh",
    backgroundImage: `url(${asd})`,
    backgroundSize: "cover",
    backgroundRepeat: "no-repeat",
    backgroundPosition: "50% 10%"
  }

如何在反应中制作图像覆盖的背景

How to make an image-covered background in react

javascript

image

reactjs

material-ui