边缘浏览器：css过滤器属性答案

【问题标题】：Edge browser: css filter property边缘浏览器：css过滤器属性
【发布时间】：2016-03-17 10:07:05
【问题描述】：

是否在 Edge 浏览器中实现了 CSS 过滤器？

  -webkit-filter: blur(10px);
     -moz-filter: blur(10px);
       -o-filter: blur(10px);
      -ms-filter: blur(10px);
          filter: blur(10px);

这些都不起作用。

免责声明：我正在版本 20.10240 上测试它（它在虚拟机上，我无法更新）。

是否有该特定版本的过滤器属性？

如果没有，是否已在较新的边缘版本中修复？

【问题讨论】：

书签the Status site。它将有助于回答此类问题。

标签： css microsoft-edge

【解决方案1】：

是的，它受支持，但您必须在 about:flags 中激活它。

【讨论】：

在启用“启用 CSS 过滤器属性”的情况下似乎可以正常工作（顺便说一句，我默认启用了该属性）。示例：codepen.io/ryanjsalva/pen/eZPpKJ

【解决方案2】：

过滤器对我不起作用，因为我有 z-index: -1。也许这可以帮助某人。

【讨论】：

据我记忆，我的问题完全一样。

【解决方案3】：

不透明度是我的问题。在具有滤镜效果的元素上将不透明度设置为 0.5 会导致 Edge 不应用滤镜。

当我将不透明度设置为 1 时，Edge 再次开始应用滤镜效果。

另外这个问题表明z-index也可能导致Edge没有应用滤镜效果的问题：filter:grayscale not always working in Edge

【讨论】：

【解决方案4】：

根据微软的说法，是的，它支持过滤器，取消最简单的形式“filter: blur(10px);”

尝试将其向上移动并将其放在过滤器声明的第一行，例如：

          filter: blur(10px);
  -webkit-filter: blur(10px);
     -moz-filter: blur(10px);
       -o-filter: blur(10px);
      -ms-filter: blur(10px);

看看它是否有效。我知道这没什么意义，但微软很直截了当地说它通常是受支持的

【讨论】：

【解决方案5】：

它不起作用。您可以在此页面上对其进行测试：

http://cssdeck.com/labs/blurred-glass

右侧的“Drag me”矩形应该有模糊的背景，但在 IE 和 Edge 上没有。我正在 Edge 版本 25.10586.0.0 上进行测试。

该页面上使用的代码是：

.bar:before {
  content: '';
  position: absolute;
  z-index: -1;
  height: 100%;
  top: 0; right: 0; left: 0;
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}

【讨论】：