是否有一种在 IE11 中进行背景模糊的纯 css 方法?

问题描述 投票:0回答:1

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

还有其他类似的问题;然而,他们中的一些人要求任何解决方案,包括 javascript 解决方案,而其他人则搜索图像模糊而不是背景模糊,而其他人则非常老,所以也许有一些新的 CSS-only 解决方案使用新的浏览器功能。

Stackoverflow 中的其他问题都没有针对 ie11 的纯 CSS 解决方案来解决我要问的问题。

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

  1. 使用javascript的解决方案使用像http://quasimondo.com/StackBlurForCanvas/StackBlurDemo.html这样的库
  2. 要使用 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');

如果是这样的话,如果能从微软那里得到一个官方的答复是不可能的,那就太好了。

css blur css-filters
1个回答
0
投票

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

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

你可以使用这个:

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

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

© www.soinside.com 2019 - 2024. All rights reserved.