Webkit un-invert invert（）图像？

Question

我在我的css中的某些图像上使用了invert（），它正确地反转它们，但是当我再次对它们运行invert（）以使它们恢复正常时，它们（这是我的问题）它们并不完全相同。亮度或对比度发生变化，它们有点褪色。为什么这是一个解决方法？有各种各样的revert（）函数吗？反转（）对图像究竟做了什么？

TIA！

UPDATE;这是理解问题的最佳方式（带注释）：http://jsbin.com/uzicaz/2/edit

Answer 1

您正在使用两个不同的选择器应用相同的CSS指令。

执行此操作时，指令不会应用两次。其中一个被另一个覆盖：

不太重要的一个被取消，而更重要的一个被应用。但两者是相同的，因此该指令只应用一次。

要取消第一个声明而不再重新应用它，请在第二个声明中将指令设置为none：

img {
  -webkit-filter: invert() brightness(100%) contrast(100%);
}

#photo1 {
  -webkit-filter: none;
}

PS invert() brightness(100%) contrast(100%)组合为我生成一张空白图像。如果您要将其设为空白，请改用visibility: hidden;。

Answer 2

实际上，我认为你真正需要的东西要容易得多。如果你想要的只是保持图像，那么：

img {
  -webkit-filter: invert();
}

#photo1 {
   -webkit-filter: none;

}

是你的解决方案。 img将被反转（或任何你想要的），但img与id = photo1不会。 请注意，并不是要撤消元素中的效果，而是覆盖它，因此转换永远不会发生。