如何在整个网页上应用CSS3灰度过滤器IE11

Question

我试图在整个页面上应用CSS3过滤器，但不知何故它不能用于IE11（可能还有IE10）。

我经历了这个：

.grayscale {
    /* Firefox 10+, Firefox on Android */
    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");
    /* IE6-9 */
    filter: gray; 
    /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    -webkit-filter: grayscale(100%); 
}

但它不适用于页面本身的每个项目。

我找到了可行的解决方案（但在项目中整合起来很复杂）：

创建特定的SASS mixin，以便为网站上适用的每种颜色添加特定主题

@mixin theme-item($properties, $theming-properties) {
    & {
        @for $j from 1 through length($properties) {
            #{nth($properties, $j)} : nth($theming-properties, $j);
        }
    }
    .grayscale & {
        @for $j from 1 through length($properties) {
            #{nth($properties, $j)} : grayscale(nth($theming-properties, $j));
        }
    }
}

就像这样工作

li{
    @include theme-item(background, $white);
}

和结果

li {
    background: #fff; 
}
.grayscale li {
    background: #fff;
}

应用jQuery函数，该函数更改可能具有十六进制颜色的每个CSS属性并将其更改为灰度

var hexGrayscale = function(hex) {
    var rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    if(rgb) {
        rgb = {
            r: parseInt(rgb[1], 16),
            g: parseInt(rgb[2], 16),
            b: parseInt(rgb[3], 16)
        };
        var mono = parseInt((0.2125 * rgb.r) + (0.7154 * rgb.g) + (0.0721 * rgb.b), 10);
        return "#" + ((1 << 24) + (mono << 16) + (mono << 8) + mono).toString(16).slice(1);
    }
};

$('body *').each(function() {
    if($(this).css('background-color').length){
        $(this).css('background-color', hexGrayscale($(this).css('background-color')));
    }
    // ...and so on
});`

快速而肮脏，但不如改变CSS（Sass）中的所有内容那么复杂

是否有另一种解决方法可以在不做出这种复杂而肮脏的变化的情况下实现它？