模糊滤波器为IE 10+ [英] Blur filter for IE 10+

问题描述

我需要对div进行模糊效果。我知道，对于Chrome我可以使用CSS3过滤器，对于IE和Firefox我必须使用SVG过滤器。我不能弄清楚的是为什么我的SVG过滤器将不工作在IE 10+，但在Firefox中正常工作？

I need to make a blur effect on a div. I know that for Chrome I can use CSS3 filters and for IE and Firefox I have to use an SVG filter. What I cannot figure out is why my SVG filter will not work in IE 10+ but works fine in Firefox?

演示： http://jsfiddle.net/8pytt/3/

HTML

<div id="container">
    <h1>test</h1>
</div>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="5"></feGaussianBlur>
   </filter>
</svg>

CSS

body {
        background: blue;
    }

#container {
    width: 100%;
    height: 500px;
    text-align: center;
    background: blue;
    opacity: .8;
    background-image: -webkit-radial-gradient(circle farthest-side, white, black);
    background-image: -moz-radial-gradient(circle farthest-side, white, black);
    background-image: -o-radial-gradient(circle farthest-side, white, black);
    background-image: -ms-radial-gradient(circle farthest-side, white, black);

    -webkit-filter: blur(5px);
    filter:url('#blur');
}

h1 {
    color: red;
    padding-top: 100px;
}

推荐答案

）不支持 filter：blur（）。 IE10支持SVG过滤器，但不支持非SVG内容。我只是说你可以使用 foreignObject 并将不透明度更改为rgba透明度， like this ，但事实证明IE不支持 foreignObject 。

IE still (on 11 now) doesn't support filter:blur(). IE10 supports SVG filters, but not for non-SVG content. I would just say you could use a foreignObject and change the opacity to rgba opacity, like this, but it turns out IE doesn't support foreignObject either.

所以，你可以将它全部转换为SVG或后备到不透明度的变化或什么。 查看此处 和

So either you can convert it all to SVG or fallback to an opacity change or something. See here and the linked page for more info.

即使在边缘，CSS筛选器效果也需要用户允许自定义标记，并且不支持 url（）功能。

Even in Edge, CSS filter effects require users to allow a custom flag and don't support the url() functionality.

这篇关于模糊滤波器为IE 10+的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！