如何使用CSS反轉元素和圖片的顏色

我有遇到這個問題。我在頁面上添加了一張“黑底白字”的圖片，卻意識到當使用了暗黑模式時，頁面的背景正確地變為黑色，但圖片仍然是黑底白字。

有點糟糕。

所以我在CSS中添加了以下規則，用於檢測暗黑模式並自動反轉圖片的顏色：

@media (prefers-color-scheme: dark) {
 .my-image {
 filter: invert(100%);
 }
}

在我的情況下，這並不是100%準確，因為我的暗黑背景顏色不是完全黑色，但這總比沒有好。

要讓事情完美，您還可以使用CSS背景圖片而不是在HTML中使用img標籤添加圖片，這樣我在暗黑模式下就可以輕松替換圖片。