1. 犀牛前端部落首页
  2. CSS教程

css实现颜色反转

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

所以我在CSS中添加了这个规则来检测暗模式,并自动反转图像的颜色:

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

在我的例子中,它不是100%准确的,因为我的深色背景色不是完全黑色,但总比没有好。

为了使效果更完美,您还可以使用CSS背景图像而不是HTML中的img标记来添加图像,而且我可以在黑暗模式下轻松地交换该图像。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4538.html

发表评论

登录后才能评论