边缘浏览器：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

是的，它是受支持的，但您必须在about：flags。

中激活它

Answer 2

不透明度对我来说是个问题。使用滤镜效果在元素上将不透明度设置为0.5会导致Edge不应用滤镜。

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

此问题也表明z-index也可能导致Edge不应用过滤效果的问题：filter:grayscale not always working in Edge

Answer 3

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

Answer 4

根据微软的说法，是的，它支持过滤器，没有最简单的形式“filter：blur（10px）;”

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

public static class TC extends RichFlatMapFunction<Tuple2<Integer, Integer>, Tuple2<Integer, Integer>> {
    private static TreeSet<Tuple2<Integer, Integer>> treeSet_duplicate_pair;
    private  static HashMap< Integer, Set<Integer>> clusters_duplicate_map;
    // either use a static initializer
    private  static  Stack<Tuple2< Integer,Integer>> stack = new Stack<Tuple2< Integer,Integer>>();
    public TC(List<Tuple2<Integer, Integer>> duplicatsPairs) {
        ...
    }

    @Override
    public void open(Configuration config) {
        // or initialize stack here, but here you have to synchronize the initialization
        ...
    }

    @Override
    public void flatMap(Tuple2<Integer, Integer> recordPair, Collector<Tuple2<Integer, Integer>> out) throws Exception {
        if (recordPair!= null)
        {
                    stack.push(recordPair);
        ...
        }
    }
}

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

Answer 5

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

http://cssdeck.com/labs/blurred-glass

右侧的“拖动我”矩形应该有模糊的背景，但它们不在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);
}