web-dev-qa-db-fra.com

CSS Blur dans IE 11

J'ai essayé d'obtenir un effet de flou css en IE 11 pendant des heures et je n'ai fait aucun progrès. J'ai essayé d'utiliser le simple html suivant:

 <!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>

J'ai également essayé d'utiliser le filtre sans le préfixe ms. J'ai vu ce code de filtre sur http://jsbin.com/ulufot/31/edit et j'ai même consulté l'exemple Microsoft http://samples.msdn.Microsoft.com/workshop/ samples/author/filter/blur.htm qui ne fonctionne pas dans mon IE 11 sur Win7. Avez-vous des idées, ce que je pourrais faire de mal?

probablement intéressant si vous avez aussi du mal: http://ie.Microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm

cssinternet-explorerfilterinternet-explorer-11blur
14
Geru

Selon ce blog ( http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS ) le filtre de flou a été supprimé après IE9:

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

Ils ont donné une solution appelée StackBlur (en utilisant JavaScript et des toiles):

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

Il se présente sous la forme d'un module complémentaire javascript téléchargeable depuis ce site.

16
Jeff Clayton

Voici une solution qui fonctionne dans IE10 + en utilisant 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>
7
joegeringer