CSS Blur in IE 11 | 易学教程

问题

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:

 <!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/edit and even consulted the microsoft example http://samples.msdn.microsoft.com/workshop/samples/author/filter/blur.htm which does not work in my IE 11 on Win7. Do you have any ideas, what I could be doint wrong?

probably interesting if you are struggling too: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm

回答1:

According to this blog (http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS) the blur filter was dropped after IE9:

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');

They did give a solution called StackBlur (using JavaScript and Canvases):

http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

It is in the form of a javascript add-on downloadable from that site.

回答2:

Here's a solution that works in IE10+ by using SVG: 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>

来源：https://stackoverflow.com/questions/25850100/css-blur-in-ie-11

标签

css

internet-explorer

filter

internet-explorer-11

blur