IE 11 中的 CSS 模糊答案

【问题标题】：CSS Blur in IE 11IE 11 中的 CSS 模糊
【发布时间】：2014-11-09 02:25:18
【问题描述】：

几个小时以来，我一直在尝试在 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 上看到了过滤器代码，甚至查阅了微软示例http://samples.msdn.microsoft.com/workshop/samples/author/filter/blur.htm，它在我的Win7 上的IE 11 中不起作用。你有什么想法，我可能做错了什么？

如果你也在苦苦挣扎，可能会很有趣：http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm

【问题讨论】：

标签： css internet-explorer filter internet-explorer-11 blur

【解决方案1】：

根据此博客 (http://demosthenes.info/blog/534/Cross-browser-Image-Blur-with-CSS)，模糊滤镜在 IE9 之后被删除：

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

他们确实提供了一个名为 StackBlur 的解决方案（使用 JavaScript 和 Canvases）：

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

它采用可从该站点下载的 javascript 插件的形式。

【讨论】：

能否请您详细说明如何使用此脚本？没有很好的教程。
您是否尝试过他们提供的示例源代码？他们还在页面上显示三个简单的命令 - 简单的单行。用法：stackBlurImage(sourceImageID, targetCanvasID, radius, blurAlphaChannel);或：stackBlurCanvasRGBA(targetCanvasID, top_x, top_y, width, height, radius);或：stackBlurCanvasRGB(targetCanvasID, top_x, top_y, width, height, radius);
这些来自提供的页面：quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
我不明白这些例子。什么是 blurAlphaChannel？我想制作一个“Div”模糊而不是图像，这在 IE 11 中可行吗？请帮忙
RGB（红绿蓝）- Alpha：透明度

【解决方案2】：

这是一个使用 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>

【讨论】：

@JeffClayton 这些引用只是为了演示这里的代码，LoremPixel.com 返回指定大小的随机图像。
这太棒了！
请记住：即使您通过 url("data:image/svg+xml;base64,CODE") trick 将其内联，也不能使用带有链接图像作为背景的 SVG 图像，例如 body { background-image: url(blurred.svg); }，例如this service