Question

我想通过单击特定元素来反转并重新反转页面（div）的背景图像。现在我有了脚本：

$(function(){
$(".invert").click(function(){
    $(".pattern").css({
    "-webkit-filter": "invert(100%)",
    "-moz-filter": "invert(100%)",
    "-o-filter": "invert(100%)",
    "-ms-filter": "invert(100%)"

    });
    $(".invert").addClass("reinvert");
    $(".invert").removeClass("invert");

});

$(".reinvert").click(function(){
    $(".pattern").css({
    "-webkit-filter": "invert(0%)",
    "-moz-filter": "invert(0%)",
    "-o-filter": "invert(0%)",
    "-ms-filter": "invert(0%)"

    });
    $(".reinvert").addClass("invert");
    $(".reinvert").removeClass("reinvert");
});
});

反转功能工作正常，但它不会重新反转元素。

我还希望至少在Firefox和其他浏览器中使用它。

更新将代码更改为：

$(function(){
$(".invert").click(function(){
    $(".pattern").toggleClass("inverted");
    $(".invert").css("display", "none");
    $(".re-invert").css("display", "inline");
});
$(".re-invert").click(function(){
    $(".pattern").toggleClass("inverted");
    $(".re-invert").css("display", "none");
    $(".invert").css("display", "inline");
});
});

使用CSS：

.inverted {
filter: invert(100%);
-webkit-filter: invert(100%);
-moz-filter: invert(100%);
-o-filter: invert(100%);
-ms-filter: invert(100%);
}

在Chrome中哪种方式可行（至少我想要的方式），但仍在寻找任何方法让它在Firefox中运行相同。谢谢大家的帮助，对不起，我没有足够的声誉来评价答案。

以下是工作代码：http://jsfiddle.net/5AdxC/1/

更新2： 好像我找到了一种方法让它在Chrome和Firfox中运行，但没有用Opera或IE测试它。 http://jsfiddle.net/5AdxC/2/

Firefox的CSS选项：

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'invert\'><feColorMatrix in='SourceGraphic' type='matrix' values='-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0'/></filter></svg>#invert");

Answer 1

对于Firefox，Gecko目前只实现filter属性的url()形式; 。 IE 4-9有另一种过滤语法。

根据规范，没有名为-moz-filter，-ms-filter和-o-filter的内容。

参考：filter at MDN

Answer 2

您的代码按原样运行正常！

请参阅此代码： http://jsfiddle.net/K5NJy/1/

也许，问题在于您在.invert和.reinvert元素上交换类：

$(".invert").addClass("reinvert"); // perhaps this is causing unwanted behavior
$(".invert").removeClass("invert"); // perhaps this is causing unwanted behavior

正如@Shivan所说，这只适用于基于webkit的浏览器。其他人不支持这种形式的过滤器。

修改 :( 在您的Firefox或Opera的必备条件之后）

请参阅此更新的小提琴： http://jsfiddle.net/K5NJy/5/

这个更新的小提琴适用于 Chrome，IE9和Firefox 。（我没有安装Chrome，因此无法检查，但基于webkit的浏览器应该支持它。）

如上所述（以及@Shivan），Firefox（Gecko）仅支持url()种过滤器。因此，您需要一个SVG / XML映射才能工作。

我从这里提取了Firefox代码：https://stackoverflow.com/a/19691142/1355315

另请注意，代码中css应用程序的顺序将影响IE9和Firefox。无论哪种过滤器最后应用都将成立。因此，如果最后应用url()一个，它将在Firefox中运行，但在IE中不起作用。所以，你可以随便改变一下。

此外，对于较旧的IE（＆lt; 9），您需要使用DXImageTransform.Microsoft.Invert，这在IE9及更高版本中已弃用。

希望有所帮助。

Answer 3

为什么只有toggle()才能有＆＃39;。颠倒＆＃39; 和＆＃39; .reinvert＆＃39; ？< / p>

使代码变得非常简单，无论如何here is my version只反转bg并保持其他所有内容静止。

此外，为什么不在样式表中为反转创建类，而不是使用内联css，所以＆＃39;还原＆＃39;只是不使用具有切换效果的那个类？使代码更专业： - ）

Answer 4

$(".reinvert").click(function(){
    $(".pattern").css({
    "-webkit-filter": "invert(100%)",
    "-moz-filter": "invert(100%)",
    "-o-filter": "invert(100%)",
    "-ms-filter": "invert(100%)"

    });
    $(".reinvert").addClass("invert");
    $(".reinvert").removeClass("reinvert");
});

有了这个，你将再次将过滤器应用到100％，然后回到原来。

Answer 5

您可以通过清除过滤器来实现此目的：

$(".reinvert").click(function(){
    $(".pattern").css({
        "-webkit-filter": "",
        "-moz-filter": "",
        "-o-filter": "",
        "-ms-filter": ""
    });

    $(".reinvert").addClass("invert");
    $(".reinvert").removeClass("reinvert");
});

工作小提琴：http://jsfiddle.net/Ad4mD/。

使用CSS / JS反转和重新反转元素

5 个答案: