CSS模糊过滤器不处理MS Edge中的某些伪元素

Question

我在伪元素的背景图像上使用模糊滤镜.如果伪元素的z-index为-1,则模糊在Microsoft Edge中无效.它没有z-index.(您必须通过about:flagsEdge 手动启用CSS过滤器).

这是一个例子:http://codepen.io/anon/pen/WrZJZY？edit = 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 索引），而是将内容放置在图像上方（具有更高的 z 索引）。

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

/* Above Fiddle contains sample CSS */

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