Internet Explorer and Safari Mobile css filter inv

问题:

I'm using a CSS class to invert img colors.
This is how I'm doing to do this:

<style type="text/css">    
.invertimg{
    -webkit-filter: invert(100%);
    -ms-filter: invert(100%);
    -o-filter: invert(100%);
    filter: invert(100%);
}
</style>

Everything works fine with Firefox and Chrome but Internet Explorer and Safari Mobile (I tested it on iOS 8) don't invert img colors.
I've been searching for this for days without any solutions.
Is there something I'm doing wrong? How can I do to convert img colors and make IE and Safari Mobile converting correctly?
Thanks.

回答1:

CSS is fully functional only in select browsers , I agree.

For more flexibility you can use javacript which is compatible with all browsers

function invert_img(rgb) {
    rgb = [].slice.call(arguments).join(",").replace(/rgb\(|\)|rgba\(|\)|\s/gi, '').split(','); //locate different values of rgb
    for (var counter = 0; counter < rgb.length; counter++) 
        rgb[counter] = (counter === 3 ? 1 : 255) - rgb[counter];
    return rgb.join(", ");
}

console.log(
    invert_img("rgb(150, 0, 0)"), // 0, 150,150
    invert_img("12, 0, 0"), // 0, 12, 12
    invert_img(25, 0, 0) // 0, 25, 25
);

Need more help? Let me know