Material-UI暗不透明度背景图像

Question

我在CardMedia组件中包装了所有的小部件，并设置了一个图像。

return (
<CardMedia image={bg} className={classes.bg}>
<main className={classes.content}>
<div className={classes.toolbar} />
<Grid container justify="center" spacing={4}>
{products.map((product) => (
<Grid item key={product.id} xs={12} sm={12} md={12} lg={6}>
<Product product={product}></Product>
</Grid>
))}
</Grid>
</main>
</CardMedia>);

我需要把图像调暗一点。

下面是样式的代码:

export default makeStyles((theme) => ({
toolbar: theme.mixins.toolbar,
content: {
flexGrow: 1,
backgroundColor: "transparent",
/* backgroundColor: theme.palette.background.default, */
padding: theme.spacing(3),
[theme.breakpoints.down("lg")]: {
paddingRight: 200,
paddingLeft: 200,
},
[theme.breakpoints.down("xl")]: {
paddingRight: 200,
paddingLeft: 200,
},
[theme.breakpoints.down("sm")]: {
padding: theme.spacing(3),
},
},
root: {
flexGrow: 1,
},
bg: {
backgroundRepeat: "no-repeat",
backgroundAttachment: "fixed",
},
}));

也许有一个更简单的方法来创建一个暗色调的背景图像?此外，我不知道这是否与任何事情有关，但是当我使用CardMedia设置图像时，每次我滚动到页面底部时，都会有一个短暂的令人讨厌的延迟。提前谢谢。

Answer 1

嗨，你应该试着用这个来让你的图像变暗是一个简单的CSS函数:

.img { filter: “brightness(50%)”; }

也可以改变你的组件，如果你没有渲染任何孩子在里面:

<Product><Product>

<Product />