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

HTML:

1 <p><strong>原始图标</strong></p>
2 <i class="icon icon-del"></i>
3
4 <p><strong>可以变色的图标</strong></p>
5 <i class="icon"><i class="icon icon-del"></i></i>

CSS:

 1 body {
 2     padding: 100px;
 3 }
 4
 5 .icon {
 6     display: inline-block;
 7     width: 32px;
 8     height: 32px;
 9     overflow: hidden;
10     /*background: lightcoral;*/
11 }
12
13 .icon-del {
14     background: url("delete.png") no-repeat center;
15 }
16
17 .icon > .icon {
18     position: relative;
19     left: -32px;
20     border-right: 32px solid transparent;/*必不可少*/
21     -webkit-filter: drop-shadow(32px 0 0 red);
22     filter: drop-shadow(32px 0 0 red);
23 }

效果：

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