css改变透明背景png图片的图标颜色

css改变透明背景png图片的图标颜色

HTML:

 
原始图标
 "icon icon-del">
 
 
可以变色的图标
 "icon">"icon icon-del">

CSS:

body {
     padding: 100px;
  }
  
  .icon {
      display: inline-block;
      width: 32px;
      height: 32px;
     overflow: hidden;
 }
 
.icon-del {
    background: url("delete.png") no-repeat center;
 }
 
 .icon > .icon {
     position: relative;
     left: -32px;
     border-right: 32px solid transparent;/*必不可少*/
    -webkit-filter: drop-shadow(32px 0 0 red);
     filter: drop-shadow(32px 0 0 red);
}