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

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

来源：CSDN

作者：xiemin97

链接：https://blog.csdn.net/weixin_44143001/article/details/103988295