Material-UI 深色不透明背景图片答案

【问题标题】：Material-UI dark opacity background imageMaterial-UI 深色不透明背景图片
【发布时间】：2021-03-06 10:22:06
【问题描述】：

我将所有小部件包装在 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 设置图像时，每次滚动到页面底部时都会出现短暂的令人讨厌的延迟。提前致谢。

【问题讨论】：

标签： javascript reactjs material-ui styles

【解决方案1】：

您好，您应该尝试使用它来使您的图像变暗，这是一个简单的 CSS 函数：

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

如果您没有在内部渲染任何子组件，也请更改您的组件：

 <Product><\Product>

到

 <Product />

【讨论】：