IE 11中的CSS Blur

时间:2014-09-15 14:13:06

标签: css internet-explorer filter internet-explorer-11 blur

我一直试图在IE 11中获得A 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

2 个答案:

答案 0 :(得分:15)

根据此博客(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插件的形式。

答案 1 :(得分:7)

这是一个使用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>