IE 11中的CSS模糊效果

Question

IE 11中的CSS模糊效果

cssinternet-explorerfilterinternet-explorer-11blur

17

我已经尝试了几个小时来在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，但在我运行的IE 11上无法正常工作。你有任何想法，我可能做错了什么吗？

如果你也遇到了问题，这个链接可能是有趣的：http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_svg-filter-effects.htm

- Geru

2个回答

10

以下是一种在IE10+中使用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>

- joegeringer

@JeffClayton 这些引用只是为了在这里演示代码，LoremPixel.com会返回指定尺寸的随机图片。 - jarodsmk

太棒了！ - Jeff Clayton

1

请注意：即使您通过“url（“data:image/svg+xml;base64,CODE”）技巧”将其内联，也不能像body { background-image: url(blurred.svg); }那样使用此SVG图像作为链接图像的背景，例如此服务。 - izogfif

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeff Clayton · Accepted Answer

根据这篇博客(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附加组件，可从该网站下载。