Is there a way to adjust the opacity of a background image using Material UI? I attempted to achieve this by utilizing the makeStyles hook in Material UI. Here is an example of my code:
import React from 'react';
import {Box,Typography } from '@mui/material';
import { makeStyles } from '@material-ui/core/styles';
const CategoryCard = ({ image }) => {
const useStyles = makeStyles({
demowrap:{
position:'relative'
},
'&::before':{
content: '"',
display: 'block',
position: 'absolute',
left: 0,
top: 0,
width: '100%',
height: '100%',
opacity: 0.6,
backgroundImage: `url(${image})`,
backgroundRepeat: 'no-repeat',
backgroundPosition: '50% 0',
backgroundSize: 'cover'
},
demoContent:{
position:'relative'
}
})
const classes = useStyles()
return (
<Box component="div" className={classes.demowrap}>
<Box component="div" className={classes.demoContent} >
<Typography component="p">Hello</Typography>
</Box>
</Box>
);
};
export default CategoryCard;Unfortunately, I am encountering difficulties as the image is not displaying correctly on the UI. Any assistance would be greatly appreciated. Thank you.