Наложение изображений с использованием стиля JS

Question

В настоящее время я пытаюсь разместить наложение поверх фонового изображения. По некоторым причинам я просто не могу заставить фоновый цвет лежать поверх изображения. Любые предложения будут ценны. Я использую много материалов пользовательского интерфейса и т. Д. c, поэтому мой стиль выполняется с помощью 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

Answer 1

попробуйте 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>