如何使用CSS反转颜色

如何使用CSS反转元素和图像的颜色

我有这个问题。我在页面上添加了“白底黑字”图像,只是意识到在暗模式下,我的页面可以将背景正确地更改为黑色,但是图像仍然是白底黑字。

有点坏。

因此,我将此规则添加到CSS中以检测暗模式并自动反转图像的颜色:

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

就我而言,这不是100%准确的,因为我的深色背景颜色不是完美的黑色,但总比没有好。

为了使事情变得完美,您还可以使用CSS背景图片(而不是img标记为HTML,这样我就可以轻松地将其替换为暗模式。

免费下载我的CSS手册


更多CSS教程: