webentwicklung-frage-antwort-db.com.de

CSS Unschärfe in IE 11

Ich habe versucht, in IE 11 stundenlang einen CSS-Weichzeichnungseffekt zu erzielen und habe keine Fortschritte erzielt. Ich habe versucht, den folgenden einfachen HTML-Code zu verwenden:

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

Ich habe auch versucht, nur den Filter ohne das MS-Präfix zu verwenden. Ich habe diesen Filtercode auf http://jsbin.com/ulufot/31/edit gesehen und sogar das Microsoft-Beispiel konsultiert http://samples.msdn.Microsoft.com/workshop/ samples/author/filter/blur.htm das funktioniert nicht in meinem IE 11 auf Win7. Hast du irgendwelche Ideen, was ich falsch machen könnte?

wahrscheinlich interessant, wenn Sie auch Probleme haben: http://ie.Microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm

cssinternet-explorerfilterinternet-explorer-11blur
14
Geru

Laut diesem Blog ( http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS ) wurde der Unschärfefilter nach IE9 entfernt:

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

Sie gaben eine Lösung namens StackBlur (mit JavaScript und Canvases):

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

Es ist in Form eines Javascript-Add-ons, das von dieser Site heruntergeladen werden kann.

16
Jeff Clayton

Hier ist eine Lösung, die in IE10 + mithilfe von SVG funktioniert: 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