CSS过滤器 - 模糊

Question

我在CodePen

中使用此示例

在我的导航栏上重新创建相同的Frosted-Glass效果。问题是，它适用于Chrome / Firefox，但不适用于Edge / IE ......

我尝试过使用：

-ms-filter: blur(3px)
filter: blur(3px)

和SVG过滤器一样：

filter: url("data:image/svg+xml;utf9,
             <svg version='1.1' xmlns='http://www.w3.org/2000/svg'>
                 <filter id='blur'>
                     <feGaussianBlur stdDeviation='3'/>
                 </filter>
             </svg>#blur");
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3'); 

但这似乎都没有给我预期的结果。 甚至CodePen示例也不适用于Edge / IE。 有没有解决这个问题的方法？