CSS模糊滤镜不适用于MS边缘中的某些伪元素

Question

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

这里的例子：http://codepen.io/anon/pen/WrZJZY?editors=110

这是由于实验的支持（边）还是我在这里做什么了吗？它适用于其他浏览器（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

这似乎是我们实施中的限制。我现在正在提出一个问题，并且会让相应的团队尽快评估repro。目前，最好的选择可能是避免将图像放置在内容下方（带有负Z指标），而是将内容放置在图像上方（具有更高的Z指数）。

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

/* Above Fiddle contains sample CSS */ 

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