如何将 CSS 3 模糊过滤器应用于 Internet Explorer 或 IE 11 的文本/图像答案

【问题标题】：How to apply a CSS 3 blur filter to a Text/image for Internet Explorer or IE 11如何将 CSS 3 模糊过滤器应用于 Internet Explorer 或 IE 11 的文本/图像
【发布时间】：2016-09-23 05:53:28
【问题描述】：

我尝试在我的 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;
}

【问题讨论】：

不幸的是，IE 上不支持模糊处理。看here。我认为唯一的解决方案是使用StackBlur
@ciurciurek 好的，感谢您的评论和链接。但是，如果我为我的页面使用 StackBlur 实现，我需要将它应用到 50 多个地方并且数量可能会增加。因此，我真的很担心性能问题。我在想，在检查了 IE 引擎的存在之后，我可以将已经模糊的图像放在这些区域的顶部，或者应用一次 StackBlur 效果并对所有区域应用相同的效果。但是，从模糊的角度来看，它不会是百分百准确的。有没有进一步的意见？
我不知道你在做什么，但也许你可以为 IE 考虑另一种逻辑。例如用模糊股票替换股票。不幸的是，我现在没有具体回答你的问题。祝你好运！

标签： css internet-explorer filter css-filters

【解决方案1】：

您可以使用 SVG 高斯模糊 制作模糊滤镜！它与 modern browsers 一起工作。
通过stdDeviation="4"控制模糊强度

Demo

See also

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

【讨论】：