将徽标反转为深色背景但保留色调？（纯CSS）

Question

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

和filter: invert(1)：

Answer 1

您可以使用：

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

会将hue-rotate所有颜色恢复为 之前的色调invert，例如 StackOverflow 图标变为：

原来的：

invert(1):

invert(1) hue-rotate(180deg):

但是，如果您的徽标特别复杂，这可能不适合您，因为所有较浅的颜色都会变暗，例如：

原来的：

invert(1):

invert(1) hue-rotate(180deg):