Edge 浏览器：css 过滤器属性

Question

Edge 浏览器中是否完全实现了 css 过滤器？

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

这些都不起作用。

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

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

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

Answer 1

据微软称，是的，它支持过滤器，取消最简单的形式"filter: blur(10px);"

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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

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

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

Answer 5

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

Edge 浏览器：css 过滤器属性

Edge browser: css filter property

css

microsoft-edge

Edge 浏览器：css 过滤器 属性

Edge browser: css filter property

css

microsoft-edge

Edge 浏览器：css 过滤器属性