React JSX 背景位置未将图像放置在 Material UI Grid 项中的右侧居中

Question

我刚刚创建了一个单页的网站组合，它非常完整，但是在将主屏幕的背景位置设置为中心右侧时遇到了问题。 这是我的网站：

https://berkley-portfolio.netlify.app/

我的回购： https : //github.com/Bolmstead/Portfolio

我只想在将窗口大小调整为移动设备时显示我的图像。 我相信背景位置会解决这个问题吗？ 背景大小是封面，我相信我做对了，但似乎遗漏了一些东西。 以下是我的家庭组件：

 import React, { useEffect } from "react"; import Grid from "@material-ui/core/Grid"; import Typography from "@material-ui/core/Typography"; import { makeStyles } from "@material-ui/core/styles"; import Container from "@material-ui/core/Container"; const useStyles = makeStyles((theme) => ({ homeContainer: { backgroundImage: `url(/images/home2.jpg)`, height: "103vh", backgroundSize: "cover", backgoundPosition: "center right" }, overlay: { zIndex: 1, height: "100%", width: "100%", backgroundSize: "cover", background: "rgba(0, 0, 0, 0.5)", }, firstName: { fontWeight: "bold", color: "white" }, lastName: { fontWeight: "bold", color: "#FFC220" }, caption: { fontWeight: "bold", color: "white" }, })); export default function Home() { const classes = useStyles(); const [fadedIn, setFadedIn] = React.useState(false); useEffect(() => { async function fadeInHomeScreen() { setFadedIn((prev) => !prev); } fadeInHomeScreen(); }, []); return ( <Grid item xs={12} className={classes.homeContainer}> <a id="Home"> <Grid container alignItems="center" justify="center" direction="row" className={classes.overlay} > <Grid item xs={12} align="center" justify="center"> <Container maxWidth="md" align="center" justify="center" className={classes.container}> <Typography m={12} variant="h2" component="h2" className={classes.firstName} display="inline" > Berkley{" "} </Typography> <Typography m={12} variant="h2" component="h2" className={classes.lastName} display="inline" > Olmstead </Typography> <Typography m={12} variant="h6" component="h6" className={classes.caption} > I'm a Full-Stack Developer </Typography> </Container> </Grid> </Grid> </a> </Grid> ); }

Answer 1

你有一个错字， backgoundPosition应该是backgroundPosition

homeContainer: {
  backgroundImage: `url(/images/home2.jpg)`,
  height: "103vh",
  backgroundSize: "cover",
  backgroundPosition: "center right"
},