css反转_如何使用CSS反转颜色

css反转

I had this problem. I added a “black on white” image on a page, only to realize that with dark mode, my page correctly changes the background to black, but the image remains white on black.

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

Kind of bad.

有点不好

So I added this rule to my CSS to detect dark mode and automatically invert the color of the image:

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

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

It’s not 100% accurate in my case, because my dark background color is not perfectly black, but it’s better than nothing.

对于我而言，它不是100％准确的，因为我的深色背景颜色不是完美的黑色，但总比没有好。

To make things perfect you could also add the image using a CSS background image instead of an img tag in HTML, and I could easily swap that in dark mode.

为了使事情变得完美，您还可以使用CSS背景图像而不是HTML中的img标签添加图像，并且我可以轻松地在暗模式下交换该图像。

翻译自: https://flaviocopes.com/css-invert-colors/

css反转