Internet explorer IE 10的模糊过滤器+；

我需要在div上做一个模糊效果。我知道对于Chrome我可以使用CSS3过滤器，对于IE和Firefox我必须使用SVG过滤器。我不明白的是，为什么我的SVG过滤器在IE10+中无法工作，但在Firefox中却可以正常工作

演示：

HTML

IE仍然（现在为11）不支持

filter:blur（）

。IE10支持SVG过滤器，但不支持非SVG内容。我只想说你可以使用

foreignObject

并将不透明度更改为rgba不透明度，但事实证明IE也不支持

foreignObject

因此，您可以将其全部转换为SVG，也可以回退到不透明度更改或其他方面。有关更多信息，请参阅

---

即使在Edge中，CSS过滤效果也要求用户支持或不支持

url（）

功能。

知道了这一点，你能想出一种方法让它继续工作吗？我还没有找到IE 10+的polyfill。@Gho5t我更新了我的答案，但恐怕目前没有解决办法

<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>

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;
}