更改 png 图像背景颜色

【问题标题】：Change png image background color更改 png 图像背景颜色
【发布时间】：2020-01-21 05:37:33
【问题描述】：

我只想在不使用其他图像的情况下将 png 图像背景更改为 悬停时蓝色。只是只有CSS。我已经使用 css 过滤器完成了这项工作，所以我尝试了几种方法，但没有运气。我使用了 css filter 灰度方法。除了灰度之外，还有什么可以将背景颜色更改为此#05adef 吗？这是fillde

img{
  width: 120px;
}

img:hover{
   filter: grayscale(100%);
}

&lt;img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt=""&gt;

【问题讨论】：

【解决方案1】：

使用background-color:#05adef

您也可以use hue-rotate(deg) 但问题是你必须寻找完美的角度来匹配所需的颜色。还可以结合使用反转和对比度来更好地控制颜色。

img{
  width: 120px;
}

img:hover{
filter:invert(100%) hue-rotate(24deg);
 
}

&lt;img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt=""&gt;

【讨论】：