如何使用CSS反轉顏色

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

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

有點壞。

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

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

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

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

免費下載我的CSS手冊


更多CSS教程: