CSS 随意更改img或者background的图片颜色

随意更改

众所周知，作为icon或者iconfont的图标，如果需要改变颜色，直接在hover里面写入color，换个颜色就行。
但是img的这种标签或者作为一个容器的background-image，他的图片颜色如何更改呢

这里是示例代码

 <img class="img" :src="XXXX.svg`" />
.img{
   width: 16px;
   height: 16px;
   transform: translateY(-60px);
   filter: drop-shadow(#333333 0 60px)  //颜色、x轴偏移量、y轴偏移量,这里的颜色就是你要指定的颜色，不管原来的图片是什么颜色，都会变成这个颜色
}

原理就是
img先向y轴负方向偏移60px，让你看不到他，然后经过滤镜处理颜色的“新”图片再向y轴正方向偏移60px，又让他穿着新衣服变回来