如何用CSS反转元素和图像的颜色
我遇到了这个问题。我在一个页面上添加了一个 "白底黑字 "的图像，后来才发现，在黑暗模式下，我的页面正确地将背景改为黑色，但图像仍然是黑底白字。
有点糟糕。
所以我在我的CSS中加入了这个规则，以检测暗色模式并自动反转图像的颜色。
@media (prefers-color-scheme: dark) {
.my-image {
filter: invert(100%);
}
}
在我的情况下，这不是100%的准确，因为我的深色背景颜色不是完全的黑色，但总比没有好。
为了使事情变得完美，你也可以用CSS背景图片而不是HTML中的img 标签来添加图片，我可以很容易地在黑暗模式下进行交换。
