css - 在 IE11 中是否有纯 CSS 的方法来进行背景模糊?

标签 css blur css-filters

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

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

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');

很高兴能得到 Microsoft 人员的正式答复,如果情况确实如此,这是不可能的。

最佳答案

答案是否定的。 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解决方案之外。

关于css - 在 IE11 中是否有纯 CSS 的方法来进行背景模糊?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37767389/

相关文章:

html - 具有百分比宽度的选择标签上的自定义按钮

html - Internet Explorer Quirks 模式下的 Iframe 不会以 100% 宽度呈现

css - LESS CSS 在另一个变量为真时定义变量

css - 过滤器 : blur not working on MS Edge

html - 将整个页面设置为黑白

css - SVG 改变动态颜色

css - 如何将 CSS 滤镜应用于背景图像

javascript - 柔性/Javascript : overlay components

keyboard - 单击 Titanium 中 tableView 内的文本字段时隐藏键盘(模糊)

javascript - 在页面焦点上使用 JavaScript 将 <audio> 声音静音