使用css悬停时更改PNG图像的颜色？ [复制]答案

【问题标题】：Change Color of PNG Image on hover with css? [duplicate]使用css悬停时更改PNG图像的颜色？ [复制]
【发布时间】：2020-04-11 15:59:15
【问题描述】：

我想在悬停时更改图像颜色。

我已经尝试过这个 css

.white:hover .img-white{
       color:white;
}

而html是

<div class="white">
    <img class="img-white" src="assets/images/icon-img/icon-3.png">
</div>

请告诉我关于如何在悬停时更改 png 图像颜色的问题。

【问题讨论】：

如果有疑问，请随时快速搜索一下您当前正在使用的内容，MDN 是一个很好的来源，因此“color css MDN”google 将为您提供：developer.mozilla.org/en-US/docs/Web/CSS/color - 其中指出：@ 987654325@ - 你不能用它来改变颜色。您需要不同的图像或叠加层。
“将图像颜色更改为白色” - 这意味着什么？图像通常包含多种颜色 - 您是否希望所有颜色都是白色的？即变成一个白盒子？
这能回答你的问题吗？ How to change color of png on hover?

【解决方案1】：

您可能无法更改颜色，但可以更改图像的不透明度：

.img-white:hover{
       opacity:0.5;
}

<div class="white">
    <img class="img-white" src="http://placekitten.com/301/301">
</div>

编辑：

这是使图像“白色”的版本：

.img-white:hover{
       opacity:0;
}

<div class="white">
    <img class="img-white" src="http://placekitten.com/301/301">
</div>

【讨论】：

但我想更改 png 图像颜色。
@Farhan 这到底是什么意思？图像通常包含多种颜色 - 您是否希望所有都是白色的？即变成一个白盒子？
当您说颜色时，究竟是什么意思？你想让它变成白色吗？
如果是这样，将此答案中的不透明度更改为 0：opacity:0; - 虽然不是“白色”，但它将与背景相同（在这种情况下为白色），所以只需制作背景白色。
如果不是图像，那么是的，你可以在上面做点什么，不幸的是，因为它是图像，正如上面@freedomn-m 所说，它包含许多颜色，你不能专门调暗某些颜色，但是有一些作弊码这可以帮助您轻松一点，但又涉及opacity 领域。希望你明白我的意思。

【解决方案2】：

使用过渡来产生更多效果。在图像悬停使用这个。 webkit-filter：灰度（0%）；过渡：1s；

并且在图片中：-webkit-filter: grayscale (100%)

【讨论】：