Internet Explorer 和 Safari Mobile css 过滤反转

Question

我正在使用 CSS class 来反转 img 颜色。
这就是我这样做的方式：

<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 正确转换？
谢谢

Answer 1

CSS 仅在 select 浏览器中功能齐全，我同意。

为了获得更大的灵活性，您可以使用与所有浏览器兼容的 javacript

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 过滤反转

Internet Explorer and Safari Mobile css filter invert

css

internet-explorer

mobile-safari