web-dev-qa-db-ja.com

CSSぼかしIE 11

私はIE 11時間で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 でフィルターコードを確認し、Microsoftの例を参照しました http://samples.msdn.Microsoft.com/workshop/ samples/author/filter/blur.htm これはmy IE 11ではWin7で動作しません。アイデアはありますか？

あなたも苦労している場合はおそらく興味深い： http://ie.Microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm

cssinternet-explorerfilterinternet-explorer-11blur
14
Geru

このブログ（ http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS ）によると、ぼかしフィルターはIE9の後に削除されました。

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

彼らはStackBlurと呼ばれるソリューションを提供しました（JavaScriptとCanvasを使用）：

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

そのサイトからダウンロード可能なjavascriptアドオンの形式です。

16
Jeff Clayton

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