CSS Flou dans IE 11

J'ai essayé d'obtenir Un css effet de flou dans IE 11 pendant des heures et n'a fait aucun progrès. J'ai essayé d'utiliser les éléments suivants html simple:

 <!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 aussi essayé en utilisant simplement le filtre sans ms préfixe. J'ai vu que le code de filtrage sur http://jsbin.com/ulufot/31/edit et même consulté l'exemple de 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 j'ai pu être doint mal?

probablement intéressant si vous avez de la peine de trop: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm

OriginalL'auteur Geru | 2014-09-15

  1. 15

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

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

    Ils ne donnent une solution appelée StackBlur (à l'aide de JavaScript et Toiles):

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

    C'est sous la forme d'un code javascript à ajouter téléchargeable à partir de ce site.

    Pourriez-vous s'il vous plaît aider à élaborer sur la façon d'utiliser ce script? Il n'est pas bon tutoriel pour elle.
    Avez-vous essayé l'exemple de code source qu'ils fournissent? Ils montrent également trois commandes simples sur la page - simple one-liners. Utilisation: stackBlurImage( sourceImageID, targetCanvasID, rayon, blurAlphaChannel ); ou: stackBlurCanvasRGBA( targetCanvasID, top_x, que haut_y, la largeur, la hauteur, rayon ); ou: stackBlurCanvasRGB( targetCanvasID, top_x, que haut_y, la largeur, la hauteur, rayon );
    Ceux qui sont dans la page: quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
    Je ne comprends pas ces exemples. Qu'est-ce que blurAlphaChannel? Je veux faire un 'Div' Flou pas de l'image est-ce possible dans IE 11 ?? S'il vous plaît aider
    RVB (rouge vert bleu) - Alpha: la Transparence

    OriginalL'auteur Jeff Clayton

  2. 7

    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>
    Ces références sont simplement pour démontrer le code ici LoremPixel.com retourne aléatoire des images de tailles indiquées.
    C'est formidable!
    Gardez à l'esprit: vous ne pouvez pas utiliser cette image SVG avec liée à une image comme arrière-plan comme body { background-image: url(blurred.svg); } même si vous inline via url("data:image/svg+xml;base64,CODE") trick, par exemple service

    OriginalL'auteur joegeringer