javascript - 其他浏览器中类似 WebKit 的磨砂玻璃

Question

WebKit 的 backdrop-filter 已被证明非常有用。我用它为我一直致力于的高度依赖“磨砂玻璃”美学的设计创建了一个演示，但沮丧地发现它具有最小的跨浏览器支持，只能在 Safari 中工作，除非是实验模式在 Opera 或 Chrome 中启用。

我希望我的设计能够跨浏览器运行，因此我研究了其他一些创建磨砂玻璃模糊的解决方案。到目前为止，我遇到过关于如何模糊图像或视频的文章和 Stack Overflow 问题，但一直无法找到任何可以模糊 div 部分的解决方案。 -webkit-filter已经在多个浏览器上工作，但没有解决我的问题，因为我只需要模糊 div 的特定部分而不是整个 div。

我创建了 a demo of the background blur我要去如前所述，它目前仅适用于 Safari。有什么方法可以让我在符合以下要求的其他浏览器中重新创建它？

• 不强制用户在 Chrome 或 Opera 中启用“实验性功能”
• 不需要以编程方式截取模态框后面的区域的屏幕截图(有关模态框外观的示例，请参见演示)然后使用 SVG 滤镜对其进行模糊处理
• react 灵敏
• 具有最佳的跨浏览器支持

---

编辑:为了演示我所指的内容，这里有两张图片可以实现或不可以实现我想要实现的目标:

不正确(来 self 的演示，显示在 Vivaldi (Chromium) 浏览器中): 在此设置中，没有模糊；只有透明覆盖层。

正确(来 self 的演示，在 Safari 中显示): 在此设置中，模态窗口仅模糊其正后方的元素，而不是模糊整个 div。

我也很好奇 SVG 解决方案是否可行，如果别无他法。我使用 SVG 编辑器创建我的模型，并且能够使用该软件执行背景模糊，所以我想知道用 SVG 编写我的整个网页是否是一个不切实际但合适的解决方案。

Answer 1

下面介绍了如何使用 SVG 滤镜对选区进行不透明模糊处理。您将使用 filter: url(#frost-me); 应用于 HTML 内容。这是跨浏览器，但有两个异常(exception):Edge/IE，您必须在 SVG 和 Firefox 中完成所有操作。要使其在 firefox 中工作，您需要将 feImage 对象引用替换为内联 svg/xml 数据 URI，因为 firefox 不支持 feImage 中的对象引用。此外 - 动画这将需要 JavaScript。

 <svg width="0" height="0">
  <defs>
    <rect id="frosty-area" rx="10" ry="10" fill="red" x="460" y="100" width="400" height="300"/>
    <filter id="frost-me" x="0%" y="0%" width="100%" height="100%">
      <feImage xlink:href="#frosty-area"/>
      <feComposite operator="in" in="SourceGraphic" result="selection"/> 
      <feGaussianBlur stdDeviation="10"/>
      <feComponentTransfer>
        <feFuncA type="discrete" tableValues="1 1"/>
      </feComponentTransfer>
      <feComposite operator="in" in2="selection"/> 
      <feComposite operator="over" in2="SourceGraphic"/>
    </filter>
  </defs>
</svg>

快速演示 - 将其放入正文 CSS:https://codepen.io/mullany/pen/mwrejb