CSS 模糊过滤器不适用于 MS Edge 中的某些伪元素

Question

我在伪元素的背景图像上使用了模糊滤镜。如果伪元素的 z-index 为 -1，则模糊在 Microsoft Edge 中无效。它在没有 z-index 的情况下工作。 （您必须通过 Edge 中的 about:flags 手动启用 CSS 过滤器）。

示例如下：http://codepen.io/anon/pen/WrZJZY?editors=110

这是由于实验支持（在 Edge 中）还是我在这里做错了什么？它适用于其他浏览器（Chrome、Safari、Firefox）。

.blur {
  position:relative;
  border: 4px solid #f00;
  height:400px; 
  width:400px;
}

.blur:before {
  content: "";
  position: absolute;
  width:400px;
  height:400px;
  z-index:-1;
  background-image:url('https://i-msdn.sec.s-msft.com/dynimg/IC793324.png');

  filter: blur(5px); 
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px); 
  -o-filter: blur(5px); 
  -ms-filter: blur(5px); 
  filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5'); 
}

Answer 1

这似乎是我们实施的一个限制。我现在正在提交问题，并将让相应的团队尽快评估重现。目前，最好的选择可能是避免将图片放在内容下方（z-index 为负），而是将内容放在图片上方（z-index 较高）。

小提琴：https://jsfiddle.net/jonathansampson/610arg2L/

/* Above Fiddle contains sample CSS */

已提交问题：https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9318580/