背景过滤器：模糊不适用于绝对位置元素答案

【问题标题】：Backdrop-filter: Blur not working on a position absolute element背景过滤器：模糊不适用于绝对位置元素
【发布时间】：2021-02-22 22:04:16
【问题描述】：

我正在尝试使用背景滤镜制作具有玻璃效果的工具提示：模糊，但滤镜似乎不适用于绝对位置的元素。我想这是因为该项目已超出文档流，因此无法识别背景，但可能有解决方法。

image: the filter does not act on elements in absolute position

【问题讨论】：

标签： css css-position css-filters

【解决方案1】：

我可以给你一个用户在堆栈溢出中给出的示例。我在下面给出了示例代码希望它有所帮助：

CSS：

body,
main::before {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/80625/tree.jpg) 0 / cover fixed;
}

main {
  margin: 100px auto;
  position: relative;
  padding: 10px 5px;
  background: hsla(0, 0%, 100%, .3);
  font-size: 20px;
  font-family: 'Lora', serif;
  line-height: 1.5;
  border-radius: 10px;
  width: 60%;
  box-shadow: 5px 3px 30px black;
  overflow: hidden;
}

main::before {
  content: '';
  margin: -35px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  filter: blur(20px);
  z-index: -1;
}

HTML：

<main>
  <blockquote>"The more often we see the things around us &#45; even the beautiful and wonderful things &#45; the more they become invisible to us. That is why we often take for granted the beauty of this world: the flowers, the trees, the birds, the clouds &#45;
    even those we love. Because we see things so often, we see them less and less."
    <footer>&mdash;
      <cite>
        Joseph B. Wirthlin
      </cite>
    </footer>
  </blockquote>
</main>

【讨论】：