IE 10+的模糊滤镜

Question

我需要在一个div上实现模糊效果。我知道在Chrome中可以使用CSS3滤镜，在IE和Firefox中必须使用SVG滤镜。但是我无法理解的是为什么我的SVG滤镜在IE 10+中无法工作，但在Firefox中运行正常？

Demo: http://jsfiddle.net/8pytt/3/

HTML

<div id="container">
    <h1>test</h1>
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="5"></feGaussianBlur>
   </filter>
</svg>

CSS

body {
        background: blue;
    }

#container {
    width: 100%;
    height: 500px;
    text-align: center;
    background: blue;
    opacity: .8;
    background-image: -webkit-radial-gradient(circle farthest-side, white, black);
    background-image: -moz-radial-gradient(circle farthest-side, white, black);
    background-image: -o-radial-gradient(circle farthest-side, white, black);
    background-image: -ms-radial-gradient(circle farthest-side, white, black);

    -webkit-filter: blur(5px);
    filter:url('#blur');
}

h1 {
    color: red;
    padding-top: 100px;
}

- Gho5t

Answer 1

IE浏览器（目前版本为11）仍不支持filter:blur()。IE10支持SVG滤镜，但不支持非SVG内容。你可以使用foreignObject并将其透明度设置为rgba透明度，像这样，但结果是IE也不支持foreignObject。

因此，您可以将所有内容转换为SVG或回退到透明度更改等其他方法。有关更多信息，请参见此处和链接的页面。

即使在Edge浏览器中，CSS滤镜效果也需要用户允许自定义标志，且不支持url()功能。

- Zach Saucier

---

知道了这点，你能想到让它仍然工作的方法吗？我还没有找到适用于IE 10+的polyfill。 - Gho5t

@Gho5t 我更新了我的回答，但恐怕目前没有解决方法。 - Zach Saucier