Javascript 使用JS样式的图像覆盖

目前，我正在尝试在背景图像的顶部放置一个覆盖图。由于某种原因，我似乎无法将背景色置于图像上方。如有任何建议，将不胜感激。我使用了大量的材料界面等，所以我的风格是用JS完成的

import React from 'react'
import Background from '../images/background.jpg'

// MUI STUFF
import Grid from '@material-ui/core/Grid'
import Container from '@material-ui/core/Container'
import Box from '@material-ui/core/Box'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(theme => ({
  background: {
    backgroundImage: `url(${Background})`,
    position: 'relative',
    objectFit: 'cover',
    width: '100%',
    height: 400,
    paddingTop: 70,
    margin: 0
  },
  card: {
    width: '100%'
  },
  overlay: {
    position: 'absolute',
    objectFit: 'cover',
    width: '100%',
    height: 400,
    margin: 0,

    backgroundColor: '#5BC2E7'
  }
}))

const Home = () => {
  const classes = useStyles()

  return (
    <Box>
      <div className={classes.overlay}>
        <Box className={classes.background}>
          <Container>
            Wyncode is so great and stuff. Track your jobs and stuff here.
          </Container>
        </Box>
      </div>
      <Box>
        <Container>More stuff will go here</Container>
      </Box>
    </Box>
  )
}

export default Home

试试这个css：

background: {
    backgroundImage: `url(${Background})`,
    position: 'relative',
    objectFit: 'cover',
    width: '100%',
    height: 400,
    paddingTop: 70,
    margin: 0
},
overlay: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    margin: 0,
    backgroundColor: '#5BC2E7'
  }

使用此html：

<Box>
  <Box className={classes.background}>
    <div className={classes.overlay}>
      <Container>
        Wyncode is so great and stuff. Track your jobs and stuff here.
      </Container>
    </div>
  </Box>
  <Box>
    <Container>More stuff will go here</Container>
  </Box>
</Box>