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

Question

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

中启用模式

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

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

不强制用户在 Chrome 或 Opera
不需要以编程方式截取模态框后面的区域的屏幕截图（有关模态框外观的示例，请参见演示）然后使用 SVG 滤镜对其进行模糊处理
反应灵敏
具有最佳的跨浏览器支持

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

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

正确（来自我的演示，在 Safari 中显示）：在此设置中，模态 window 仅模糊其正后方的项目，而不是模糊整个 divs。

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

Answer 1

以下是使用 SVG 滤镜对选区进行不透明模糊处理的方法。您将使用 filter: url(#frost-me); 申请 HTML 内容。这是跨浏览器，但有两个例外：Edge/IE 您必须在 SVG 和 Firefox 中完成所有操作。要使其在 firefox 中工作，您需要将 feImage object 引用替换为内联 svg/xml 数据 URI，因为 firefox 不支持 feImage 中的 object 引用。此外 - 动画这将需要 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>

快速演示 - 刚刚将其放入 body CSS：https://codepen.io/mullany/pen/mwrejb

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

WebKit-like Frosted Glass in Other Browsers

html

javascript

css

svg

webkit