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

Question

我对此有疑问 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);
`;

提前感谢所有有用的答案！

Answer 1

我为背景创建了另一个元素，并给它一个负索引，使其位于所有其他元素之后。

.parent {
  position: relative;
  height: 250px;
  width: 250px;
  z-index: 0;
  background-image: url('https://picsum.photos/id/237/200/300');
  background-size: cover;
  background-repeat: no-repeat;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(20px);
  z-index: -1;
}

<div class="parent">
  <div class="background"></div>
  Text not getting blurred
</div>

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

How to disable backdrop-filter: blur from content inside a div?

html

css

blur