方式一

css  程式碼

.icon {
    display: inline-block;
    width: 20px; height: 20px;
    overflow: hidden;
}
.icon-img {
    background: url(delete.png) no-repeat center;
}
.icon > .colorchangicon{
    position: relative;
    left: -20px;
    border-right: 20px solid transparent;
    -webkit-filter: drop-shadow(20px 0);
    filter: drop-shadow(20px 0);    
}
 

html 程式碼

<p><strong>原始圖示</strong></p>
<i class="icon icon-img"></i>


<p><strong>變色的圖示</strong></p>
<i class="icon"><i class="colorchangeicon icon-img"></i></i>

主要知識點：border-right:20px solid transparent; //右邊框為寬度為20px的不透明的邊框

                    filter: drop-shadow(rgb(153, 255, 51) 20px 0);//顏色為rgb(153, 255, 51) ，X軸方向為20px，Y軸方向為0px的投影。

                    rgba顏色可換為#十六進位制色；主要利用了邊框和投影，通過修改邊框上投影色達到切換顏色的目的。

方式二

利用css3 background-blend-mode 背景混合模式 

可以是背景圖片見的混合模式，也可以是背景圖片和背景色的混合。

圖片與顏色混合 : background-image: url('xx.jpg'), linear-gradient(#000,#000);background-blend-mode: lighten;

圖片與圖片混合 :  background: url(xx.jpg) no-repeat center, url(xx.jpg) no-repeat center;background-blend-mode: lighten;

注:

圖片和顏色混合，要做到換色，需要純色圖片，白底加純黑色。

如果圖片不是純黑色，那麼混合出來的圖片就得參考rgb顏色混合，這個就需要就算混合色值。純黑和其它顏色混合表現就是混合的顏色