I want to change the opacity of background image. I can do this using plain html and css. Here is an example html and css markup.
<div class="demo-wrap">
<div class="demo-content">
<h1>Hello World!</h1>
</div>
</div>
Here is the CSS
.demo-wrap {
position: relative;
}
.demo-wrap:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.6;
background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png');
background-repeat: no-repeat;
background-position: 50% 0;
background-size: cover;
}
.demo-content {
position: relative;
}
I want to change the opacity of background image using Material UI. To do so I have used makeStyles hook of material Ui. I have made customStye and used it in className. Here is 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;
But I am not getting desired result. Image is not shown in the UI. Any help is appreciable. Thanks.
You need to put the background image into a pseudo-element of the parent
.demo-wrap::before {
content: "";
background-image: url('https://placekitten.com/1200/800');
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.75;
}
and give the element itself a position relative
and height and width according to this:
.demo-wrap {
position: relative;
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
You can also add an overlay with reduced opacity and background-color on top of the background image.
.demo-wrap::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.25);
}
You can try with this. I think that will be work.
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'
}
})
You can use a normal CSS method called filter() like that
filter: opacity(50% "any value you need");
Read More https://developer.mozilla.org/en-US/docs/Web/CSS/filter