css - Webkit 不反转反转（）图像？

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 不会。请注意，并不是您撤消了元素中的效果，而是覆盖了它，所以转换永远不会发生。