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）。

Fiddle: https://jsfiddle.net/jonathansampson/610arg2L/

/* Above Fiddle contains sample CSS */

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

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

CSS blur filter not working on certain pseudo elements in MS Edge

css

pseudo-element

microsoft-edge

css-filters