Internet Explorer和Safari Mobile css过滤器 [英] Internet Explorer and Safari Mobile css filter invert

问题描述

我使用CSS类别来逆转img颜色。

这是我要做的事：

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>

一切都适用于Firefox和Chrome，但Internet Explorer和Safari Mobile（我在iOS 8上测试）不要反转img颜色。

我一直在搜索这个天没有任何解决方案。

有什么我做错了吗？如何转换img颜色，并使IE和Safari Mobile正确转换？

谢谢。

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.

推荐答案

为了更灵活，您可以使用 javacript ，它与所有浏览器兼容

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
);

需要更多帮助？让我知道

这篇关于Internet Explorer和Safari Mobile css过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！