我想在反应时模糊我的背景图像网格，但是当我在背景图像上使用过滤器时，一切都变得模糊，并且我使用makeStyles

Question

我在reac上有一张“卡”，卡内有一些组件，我想在卡上的背景上放置一些图像，并且我想模糊背景上的这个图像，但是当我使用过滤器来进行模糊时，一切都变得如此模糊，我用背景颜色和某种颜色做了一些测试，有时可以工作，但是对于图像，它不起作用，someno可以帮助我：

My Code With Image:

        <Grid
          className={classes.backgroundDescription}
          item
          xs={12}
          md={6}
        >
          <div
            style={{ backgroundImage: `url(${icon})`, backgroundSize: 'cover', backgroundPosition: 'center', height: '100%' , filter: 'blur(10px)',}}
            className={classes.contentCourse}
          >
            <CourseDescription onLike={onLike} data={info} icon={icon} />
          </div>
        </Grid>

Styles:

const useStyle = makeStyles((theme) => ({
 backgroundDescription: {
    position: 'relative',
    overflow: 'hidden',
    '&::before': {
      content: '""',
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      filter: 'blur(10px)',
      zIndex: -1,
    },
    '& > div': {
      position: 'relative',
      zIndex: 1,
    },
  },
  contentCourse: {
    position: 'relative',
  }
}));



[Image Wiht FIlter (Blur)](https://i.stack.imgur.com/q0HiX.png)
[Image without fliter](https://i.stack.imgur.com/u1JDO.png)

Remeber that I only want blur the background image


Like I said I got some test with colors backgroun and with color, it works, but how i need call icon (that is my image) on my return ai think that the problem could be there

Answer 1

您应该将背景图像与内容分开，以便模糊效果仅适用于图像而不适用于内容。

尝试添加一个新的 div，其中包含背景，然后将您的 CourseDescription 包装到另一个 div 中

尝试类似：

  <Grid
          className={classes.backgroundDescription}
          item
          xs={12}
          md={6}
        >
          <div
            style={{position : 'absolute', top : 0, left : 0, right : 0, bottom : 0, zIndex : -1, backgroundImage: `url(${icon})`, backgroundSize: 'cover', backgroundPosition: 'center', height: '100%' , filter: 'blur(10px)',}}
            className={classes.contentCourse}
          />
<div>
            <CourseDescription onLike={onLike} data={info} icon={icon} />
       </div>  
         </Grid>