我一直在尝试在 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>
我还尝试仅使用不带 ms 前缀的过滤器。我在 http://jsbin.com/ulufot/31/edit 上看到了该过滤器代码,甚至查阅了微软示例 http://samples.msdn.microsoft.com/workshop/samples/author/filter/blur。 htm 在我的 Win7 上的 IE 11 中不起作用。你有什么想法吗,我可能做错了什么?
如果您也遇到困难,可能会很有趣:http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm
根据此博客(http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS),模糊滤镜在 IE9 之后被删除:
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
他们确实给出了一个名为 StackBlur 的解决方案(使用 JavaScript 和 Canvases):
http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
它采用 JavaScript 插件的形式,可从该网站下载。
这是一个使用 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://picsum.photos/400/200" x="0" y="0" height="200" width="400" class="nonblurred" />
<image xlink:href="http://picsum.photos/400/200" x="0" y="0" height="200" width="400" class="blurred" filter="url(#svgBlurFilter)" />
</svg>