如何在材质 UI 中更改背景的图像不透明度？

Question

我想更改背景图像的不透明度。我可以使用纯html和css来完成这项工作。下面是一个html和css标记示例。

<div class="demo-wrap">
<div class="demo-content">
<h1>Hello World!</h1>
</div>
</div>

这是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;
}

我想使用材质UI更改背景图像的不透明度。为此，我使用了材料Ui的makeStyles挂钩。我制作了customSteye并在className中使用了它。这是我的密码。

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;

但我并没有得到想要的结果。UI中不显示图像。任何帮助都是可观的。谢谢

Answer 1

您需要将背景图像放入父的伪元素中

.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;

}并根据以下内容给元件本身一个位置CCD_ 1和高度和宽度：

.demo-wrap {
position: relative; 
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;

}

您还可以在背景图像的顶部添加一个不透明度和背景颜色降低的覆盖。

.demo-wrap::before {
content: "";
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: rgba(0,0,0,0.25);

}

Answer 2

您可以试试这个。我认为这将是工作。

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'
}
})

Answer 3

您可以使用一个名为filter((的普通CSS方法，就像一样

滤镜：不透明度(50%"任何你需要的值"(；

阅读更多https://developer.mozilla.org/en-US/docs/Web/CSS/filter