【图片高亮】CSS 滤镜实现高亮后端返回的图片

在项目开发中，有时我们前端需要实现一些交互效果使得用户体验更友好。图标高亮比较常见的方式是前端引入svg静态资源，在鼠标悬停时添加color样式。但当渲染较多图标时，需要从后端请求资源，此时通过color改变颜色无效。通过简单的CSS滤镜操作，实现在鼠标悬停时高亮显示图片。

什么是 CSS 滤镜？

CSS 滤镜（filter）是一组允许我们在网页上直接应用图像效果的属性。例如，滤镜可以用来调整亮度、对比度、饱和度等。它们不仅能应用在图片上，也可以应用在其他元素上，例如视频或背景图片。

实现鼠标悬停高亮效果

我们将使用以下CSS滤镜组合来实现鼠标悬停时的高亮效果

filter: invert(29%) brightness(50%) saturate(0%);

• invert(29%): 反转颜色，29%表示反转程度。反转颜色可以让图片看起来更突出。
• brightness(50%): 调整亮度，50%意味着亮度降低到一半，使得图片在悬停前看起来更暗。
• saturate(0%): 调整饱和度，0%意味着去除饱和度，使图片变成灰度图像。

至此已完成跟UI设计稿基本一致的高亮效果 ^-^