internet-explorer - 适用于 IE 10+ 的模糊滤镜

Question

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

演示: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;
}

Answer 1

IE 仍然(现在是 11)不支持 filter:blur()。 IE10 支持 SVG 过滤器，但不支持非 SVG 内容。我只想说你可以使用 foreignObject 并将不透明度更改为 rgba 不透明度，like this , 但事实证明 IE 也不支持 foreignObject 。

因此，您可以将其全部转换为 SVG 或回退到不透​​明度更改或其他方式。 See here和 linked page了解更多信息。

即使在 Edge 中，CSS 滤镜效果也需要用户 allow a custom flag并且不支持 url() 功能。