css - IE11 中的模糊效果以创建磨砂玻璃

Question

我正在尝试模仿这种磨砂玻璃外观：https ://codepen.io/AmJustSam/pen/ModORY

找出 IE9+ 不支持过滤器：blur(..

在阅读了有关该主题的许多文章和讨论之后，大多数人似乎都指向使用诸如 stackblur 脚本之类的第 3 方选项，除非我可以从 nuget（公司政策）下载它，否则这对我来说不是一个选项。我正在尝试将主体背景图像继承到 div，然后将其模糊以形成磨砂外观。

这在 Firefox 中运行良好：

.frost
{

    box-shadow: inset 0 0 0 3000px rgba(255,255,255,0.3);
    filter: blur(10px);
    overflow: hidden;
    background: inherit;
}

但不是 IE11。我遇到的一些 svg 解决方案是用于模糊图像本身。如果可能的话，如何使用 svg 模糊 div 继承的背景？

编辑：虽然建议的副本对我没有帮助，因为它不会修改继承的背景，只会用 SVG 在其上覆盖图像。似乎这可能是唯一的解决方案。因此，使用可能的重复响应中的示例：

svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svgBlur">

  <filter id="svgBlurFilter">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
  </filter>

  <image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="nonblurred" />

  <image xlink:href="http://lorempixel.com/400/200" x="0" y="0" height="200" width="400" class="blurred" filter="url(#svgBlurFilter)" />

</svg>

似乎让我朝着正确的方向前进，但图像标签上的图像尺寸以像素为单位。我如何使它动态到以百分比定义的 div 的宽度。

标签： cssinternet-explorer-11blur