CSS：使徽标图像在深色背景上看起来不错吗？

Question

使CSS的深色背景上的浅色背景的徽标图像看起来更好的最佳方法是什么？我知道有filter: invert(1)，但是这会使所有颜色反转，并且徽标看起来完全不同。

带有filter: invert(1)：

Answer 1

您可以使用：

img.dark {
  filter: invert(1) hue-rotate(180deg);
}

hue-rotate将所有颜色变回invert之前的色相，因此例如StackOverflow图标变为：

原始：

反转（1）：

反转（1）色相旋转（180度）：