Html 如何禁用背景过滤器：从div内的内容模糊？

我对这个CSS属性有问题。 我创建了一个包含输入和标签的模式，我只想模糊背景上的内容。问题是模糊也适用于容器内的所有内容，包括文本和输入。 我不知道如何解决这个问题。 这是我的容器代码：

const StyledModal = styled.div`
  position: relative;
  overflow: auto;
  z-index: 100;
  width: fit-content;
  max-height: fit-content;
  padding: 47px 41px 61px;
  display: flex;
  border: 1px solid ${({ theme }) => theme.colors.primary};
  border-radius: ${({ theme }) => theme.borderRadiusLarge};
  background: linear-gradient(
    180deg,
    rgba(92, 192, 190, 0.4) 0%,
    rgba(92, 192, 190, 0.4) 100%
  );
  backdrop-filter: blur(200px);
`;

---

提前感谢所有有用的答案

我为背景创建了另一个元素，并为其设置了一个负指数，以使其位于其他元素的后面

.parent{
位置：相对位置；
高度：250px；
宽度：250px；
z指数：0；
背景图像：url（'https://picsum.photos/id/237/200/300');
背景尺寸：封面；
背景重复：无重复；
}
.背景{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
背景滤镜：模糊（20px）；
z指数：-1；
}

文本不会变得模糊

这个问题对您有帮助吗-