纯CSS 实现 img 图片换色

svg 图片可以直接用 color来进行换色，但是像 png 这样的图片却不可以通过 color 来换色，而在日常开发过程中通常会遇到设计那边要求图片在 hover 时换色，那么怎么利用 CSS 来完成这个效果呢。

// 这里使用的是less嵌套规则
 &:hover {
   img {
     transform: translateY(-200px);
     filter: drop-shadow(#ffd283 0 200px);
   }
}

这里主要使用 filter和transform来完成这个效果，drop-shadow第一个参数是hover时的颜色，后两个参数分别是 X、Y 轴的偏移量。这里的原理就是让原本的 img 偏移处用户视图区域(偏移值可以更改)，然后让新的图片偏移到原img的位置。