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

HTML:

 <p><strong>原始图标</strong></p>
 <i class="icon icon-del"></i>

 <p><strong>可以变色的图标</strong></p>
 <i class="icon"><i class="icon icon-del"></i></i>

CSS:

 body {
     padding: 100px;
 }

 .icon {
     display: inline-block;
     width: 32px;
     height: 32px;
     overflow: hidden;
     /*background: lightcoral;*/
 }

 .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);
 }

效果：

学习来自[张鑫旭的空间]