javascript - 更改png图像背景颜色

Question

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

img{
  width: 120px;
}

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

<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">

Answer 1

使用背景颜色:#05adef

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

img{
  width: 120px;
}

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

<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">