在IE11中是否有一种仅用CSS进行背景模糊的方法?

时间:2016-06-11 18:49:02

标签: css blur css-filters

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

还有其他类似的问题,但有些人要求任何解决方案,包括javascript解决方案,而其他人搜索图像模糊,而不是背景模糊,而其他人已经很老了所以也许有一些新的css解决方案使用新的浏览器功能

stackoverflow中的其他任何问题都没有针对我要问的问题的ie11解决方案。

我所知道的非css解决方案是:

  1. 使用javascript的解决方案使用http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
  2. 等库
  3. 使用html2canvas:https://github.com/niklasvh/html2canvas之类的库创建背景图像,然后将图像插入内联svg并对其应用svg滤镜模糊。
  4. 我已经检查并验证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');
    

    从微软的某个人那里获得官方回答是非常好的,如果是这样的话,这是不可能的。

1 个答案:

答案 0 :(得分:0)

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

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

您可以使用:

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

...但它不是一个仅限CSS的解决方案,除了加载已经模糊的图像的不那么CSS的解决方案或使用IE11时的blur.png(半透明灰色)。