我只想模糊网格的背景，但它完全专注于使用 MakeStyles 的 React

Question

我有一个页面，其中有我的课程信息，我想添加一些带有模糊的背景，但是当我添加此模糊时，我的所有网格都会变得模糊，我可以看到任何东西，如何仅在我的背景上添加模糊？

我的代码是：

        <Grid
          className={classes.backgroundDescription}
          item
          xs={12}
          md={6}>
          <div>
            <CourseDescription onLike={onLike} data={info} icon={icon} />
          </div>
        </Grid>

const useStyle = makeStyles((theme) => ({
  backgroundDescription: {
    backgroundColor: '#4040ff',
    filter: 'blur(10px)',
  }
)}

我尝试了很多东西，分离div和网格，使用backgroundFilter，像这样来，它也不起作用

请记住，我想要带有模糊的蓝色背景，只有背景

Answer 1

你已经使用了css的position属性

1.创建一个虚拟div作为背景

重要的是不要将元素添加到虚拟 div 中。 应用这个CSS 喜欢

     .dummydiv{

      position:relative;

     }

    .element {
       position: absolute;
       top:0;
       left:0;
     }

Answer 2

包括以下

CSS

以获得精确且准确的解决方案，

const useStyles = makeStyles((theme) => ({
   backgroundDescription: {
       position: 'relative',
       overflow: 'hidden',
       '&::before': {
           content: '""',
           position: 'absolute',
           top: 0,
           left: 0,
           width: '100%',
           height: '100%',
           backgroundColor: '#4040ff', // Background color if needed
           backgroundSize: 'cover',
           backgroundPosition: 'center',
           filter: 'blur(10px)',
       },
       '& > div': {
           position: 'relative',
           zIndex: 1,
       },
   },
}));