如何使用CSS反轉顏色

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

我有這個問題。我在頁面上添加了“白底黑字”圖像，只是意識到在暗模式下，我的頁面可以將背景正確地更改為黑色，但是圖像仍然是白底黑字。

有點壞。

因此，我將此規則添加到CSS中以檢測暗模式並自動反轉圖像的顏色：

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

就我而言，這不是100％準確的，因為我的深色背景顏色不是完美的黑色，但總比沒有好。

為了使事情變得完美，您還可以使用CSS背景圖片（而不是img標記為HTML，這樣我就可以輕鬆地將其替換為暗模式。

免費下載我的CSS手冊