Question

我正在使用CSS类来反转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仅在部分浏览器中完全有效，我同意。

为了获得更大的灵活性，您可以使用与所有浏览器兼容的 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过滤器反转

1 个答案: