如何应用CSS 3模糊滤镜的文本/图像为Internet Explorer或IE 11

Question

我试过，在我的CSS下面的过滤器模糊文本，但它适用于Chrome, Mozilla &Safari。我希望这工作在IE 11也。你能提出其他的建议吗?

我不想应用StackBlur解决方案，因为它会极大地阻碍性能，我在一个页面中有很多地方要模糊。

.blurry-text {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.00);
-webkit-filter: blur(5px);
background: filter: url('/media/blur.svg#blur');
filter: blur(5px);
filter: progid: DXImageTransform.Microsoft.Chroma(color=#333333), progid: DXImageTransform.Microsoft.MotionBlur(strength=0, direction=0), progid: DXImageTransform.Microsoft.Blur(pixelradius=5);
color: transparent;
}

Answer 1

您可以使用SVG高斯模糊制作模糊滤镜!它可以与现代浏览器一起工作。
从stdDeviation="4"

控制模糊强度

演示

参见

<div class="container" style="height: 613px;">
    <svg id="mySVG" width="100%" height="100%" viewBox="0 0 1131 591">
        <filter id="blurMe">
            <feGaussianBlur in="SourceGraphic" stdDeviation="4" />
        </filter>
        <image filter="url(#blurMe)" xlink:href="http://static1.squarespace.com/static/56d70b042b8dde104d998bda/t/56d9b7e827d4bdab535a3af8/1457109282817/kiddos.jpg?format=1500w" x="0" y="0" height="100%" width="100%"/>
    </svg>
</div>