使用 IE11 中的 css 制作灰度图像,以 Quirks 模式运行



我需要将内部遗留 Web 应用程序上的一些彩色图像转换为灰度。我认为最简单的方法是使用CSS过滤器。由于组策略,此应用程序的用户通过 IE11 访问它。此应用程序还必须使用 Quirks (IE5) 文档模式运行,否则会发生疯狂的事情(渲染问题、javascript 无法正常工作等)。

我尝试了以下代码(以及来自此处,此处和此处的代码)

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

没有效果。鉴于此标准(IE11 以 IE5 文档模式运行),我是否可以做些什么来获取这些灰度图像,如果是这样,如何?

注意:重新设计应用程序以使用更现代的技术目前没有资金,将来也不会。

注意:使用某些脚本将每个图像转换为灰度并保存输出也不是一种选择,因为有数百万张图像可用。

链接到显示彩色谷歌徽标的示例:https://jsfiddle.net/bq2mw5ya/2/

实际上我将我的评论作为反馈的答案:

IE 特定的过滤器应该放在最后,所以它不会被下一个过滤器覆盖。

Activex 也应该允许运行

当然,它应该处于怪癖模式...

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

最新更新