Webkit invert()图像？

Question

我对css中的一些图像使用invert()，它会正确地反转它们，但是(这就是我的问题所在)当我再次对它们运行invert()以使它们恢复正常时，它们并不完全相同。亮度或对比度发生变化，它们有点褪色。为什么会这样?有什么方法可以绕过它？有没有排序的revert()函数？invert()究竟对图像做了什么？

蒂娅！

更新；这是理解问题的最好方法(带注释)：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将被反转(或者你想要的任何东西)，但是id = photo1的img不会。请注意，这并不是要撤销元素中的效果，而是要覆盖它，因此转换永远不会发生。