css 修改 background png图片的颜色 滑动纯色

使用png图片来制作图标  滑动效果  还要另外加个图片，比较费图片，如何使用css 来制作  字体图标 滑动换色效果呢？

使用下面代码即可

  <style>
    .changecolor {
    display: inline-block;
    width: 432px; height: 99px;
    background-color: #dd1b14;
    -webkit-mask:url(./test.png) no-repeat;
    mask:url(./test.png) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
   }
    .changecolor：hover{
 background-color: #fff;
}
  </style>