IE 11 中的 CSS 模糊
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25850100/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Blur in IE 11
提问by Geru
I have been trying to get A css blur effect in IE 11 for hours and did not make any progress. I tried to use the following simple html:
几个小时以来，我一直试图在 IE 11 中获得 css 模糊效果，但没有取得任何进展。我尝试使用以下简单的 html：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
.blur{
-ms-filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='50');
}
</style>
</head>
<body>
<img src='http://img3.wikia.nocookie.net/__cb20120627075127/kirby/en/images/0/01/KDCol_Kirby_K64.png' class="blur" />
</body>
</html>
I also tried just using the filter without the ms prefix. I saw that filter code on http://jsbin.com/ulufot/31/editand even consulted the microsoft example http://samples.msdn.microsoft.com/workshop/samples/author/filter/blur.htmwhich does not work in my IE 11 on Win7. Do you have any ideas, what I could be doint wrong?
我也尝试只使用没有 ms 前缀的过滤器。我在电视上看到过滤代码http://jsbin.com/ulufot/31/edit甚至咨询了微软的例子http://samples.msdn.microsoft.com/workshop/samples/author/filter/blur.htm这不在我的 Win7 上的 IE 11 中不起作用。你有什么想法，我可能做错了什么？
probably interesting if you are struggling too: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm
如果你也在挣扎，可能会很有趣：http: //ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm
回答by Jeff Clayton
According to this blog (http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS) the blur filter was dropped after IE9:
根据这个博客（http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS）模糊过滤器在 IE9 之后被删除：
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
They did give a solution called StackBlur (using JavaScript and Canvases):
他们确实提供了一个名为 StackBlur 的解决方案（使用 JavaScript 和 Canvases）：
http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
It is in the form of a javascript add-on downloadable from that site.
它采用可从该站点下载的 javascript 附加组件的形式。
回答by joegeringer
Here's a solution that works in IE10+ by using SVG: https://jsfiddle.net/joegeringer/g97e26pa/8/
这是一个使用 SVG 在 IE10+ 中工作的解决方案：https: //jsfiddle.net/joegeringer/g97e26pa/8/
<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>
