更改png图像背景颜色

Question

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

 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

使用background-color:#05adef

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

 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="">