带有 JavaScript 跨浏览器的 Webkit 背景过滤器答案

【问题标题】：Webkit Backdrop Filter with JavaScript cross-browser带有 JavaScript 跨浏览器的 Webkit 背景过滤器
【发布时间】：2016-03-12 23:13:43
【问题描述】：

我已经看到了这个令人惊叹的新演示

-webkit-backdrop-filter: blur(Xpx);

我想问一下，如何使用至少在 Chrome 中也可以在 Firefox 中运行的 JavaScript 来重现这个？

演示： https://webkit.org/demos/backdrop-filter/

【问题讨论】：

目前，此 CSS 仅适用于 Safari。有一个跨浏览器兼容的解决方案真是太好了。
是的！但看起来不可能atm ????

标签： javascript css webkit

【解决方案1】：

你可以试试 svg 过滤器：

http://codepen.io/MakiBM/pen/YGEgQK?editors=1000

<svg x="0px" y="0px" width="500px" height="500px" viewbox="0 0 500 500">
  <defs>
    <filter id="blur" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
      <feGaussianBlur x="50" y="50" width="400" height="400" stdDeviation="10" in="SourceGraphic" result="blurImg"/>
      <feComponentTransfer in="blurImg" result="opaqueBlur">
        <feFuncA type="linear" intercept="1"/>
      </feComponentTransfer>
      <feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"/>
    </filter>
  </defs>

   <image filter="url(#blur)" x="10" y="10" id="svg-image" width="100%" height="100%" xlink:href="https://www.nycgovparks.org/photo_gallery/full_size/14413.jpg" />

    <rect x="50" y="50" height="400" width="400" fill="rgb(255,255,255)" fill-opacity="0.2" />
</svg>

我还没有进行跨浏览器检查，但支持非常广泛： http://caniuse.com/svg-filters

【讨论】：

哇，这太棒了。非常感谢！像魅力一样工作！