如何使 IE 11 中的彩色图像变灰

Question

有没有办法在 IE 11 中使彩色图像变灰？在 9-10 中，它使用 svg 过滤器工作，但在 11 中则不行。

下面是我的代码

    img {
      filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
      -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
      filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
}

Answer 1

IE 特定的过滤器应该放在最后，IE 应该处于 quirk 模式...

 img.grayscale {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: url(desaturate.svg#greyscale);
        filter: gray;
    }