如何在悬停时显示图像的实际颜色

Question

所以我正在创建一个网站，并在一个部分中放置了多个徽标，我怎样才能将它们的默认颜色保持为灰色，当用户将鼠标悬停在徽标上时，它会显示徽标的实际颜色，徽标有多种颜色，所以我不能对单一颜色进行简单的颜色更改。例如。蟒蛇标志在悬停时应该有蓝色和黄色，没有悬停时应该是全灰色。

我知道怎么只换一个颜色

Answer 1

在CSS中使用

filter: grayscale()

。

grayscale(1)

将使图像变灰

:hover

可以使用

grayscale(0)

重置灰色并以彩色显示图像：

img {
max-height: 70vh;
  max-width: 70vw;
  filter: grayscale(1);
}

img:hover {
  filter: grayscale(0);

<img src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg">

Answer 2

你需要两个版本的标志：灰色和彩色，然后像悬停一样交换它们

this:
div {
    background: url('gray-logo.png');
}
div:hover {
    background: url('color-logo.png');
}