在 IE11 中是否有仅使用 css 的方法来进行背景模糊？答案

【问题标题】：Is there a css-only way to do background blur in IE11?在 IE11 中是否有仅使用 css 的方法来进行背景模糊？
【发布时间】：2016-06-11 18:49:02
【问题描述】：

所以问题是：我想让背景在打开弹出窗口时可见但模糊。我不是问图像模糊，我问的是给页面添加模糊，我想知道目前是否有任何仅 css 的解决方案？

还有其他类似的问题，但是其中一些要求任何解决方案，包括 javascript 解决方案，而另一些则搜索图像模糊而不是背景模糊，而另一些则非常旧，所以也许有一些新的仅使用 css 的解决方案使用新的浏览器功能.

stackoverflow 中的其他问题都没有针对我所问问题的 ie11 的纯 css 解决方案。

我知道的非 CSS 解决方案是：

使用 javascript 的解决方案使用像 http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html 这样的库
要使用 html2canvas 等库创建背景图像：https://github.com/niklasvh/html2canvas，然后将图像插入内联 svg 并对其应用 svg 过滤器模糊。

我已经检查并确认以下在 IE11 中不起作用：

filter: blur(7px);
-webkit-filter: blur(7px);
filter: url(/images/blur.svg#blur);
filter: url("data:image/svg+xml;utf9,<svg%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'><filter%20id='blur'><feGaussianBlur%20stdDeviation='7'%20/></filter></svg>#blur");
-moz-filter: blur(7px);
-o-filter: blur(7px);
-ms-filter: blur(7px);
/* This only works for older IE. For newer IE using javascript is suggested here: http://thenewcode.com/534/Crossbrowser-Image-Blur-with-CSS */
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='7');

很高兴能从微软的某个人那里得到官方答复，如果是这样的话，这是不可能的。

【问题讨论】：

模糊页面，但是一个元素意味着将页面内容设置为您模糊的通用包装器，并让这个另一个元素是一个兄弟但一个孩子。对于具有正确前缀的旧 IE 过滤器，IE5t o 9
@GCyrillus 我知道这就是我对上面代码所做的，它适用于除 IE11 之外的所有浏览器，这就是我问这个 stackoverflow 问题的原因。我需要一种方法来为您正在谈论的通用包装器添加模糊，该包装器将在 IE11 中工作，我更喜欢仅使用 css 的解决方案。
@GuyL。您找到解决方案了吗？
@swenedo 我为 body 元素的包装器内的所有元素 (*) 添加了不透明度，它是的儿子和弹出窗口的兄弟。根据body-ie11 css类添加了这个，该类由javascript添加到body中，加载时检查它是否为ie-11。

标签： css blur css-filters

【解决方案1】：

答案是否定的。 Microsoft 不支持 IE 11 的此 CSS 功能，如下所述：

http://thenewcode.com/534/Cross-browser-Image-Blur-with-CSS

你可以用这个：

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

...但它不是纯 CSS 的解决方案，除了加载已经模糊的图像或 blur.png（半透明灰色）（如果使用 IE11）的非纯 CSS 解决方案。

【讨论】：