css图片切换颜色

方式一

css  代码

.icon {
    display: inline-block;
    width: 20px; height: 20px;
    overflow: hidden;
}
.icon-img {
    background: url(xx.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颜色混合，这个就需要就算混合色值。纯黑和其它颜色混合表现就是混合的颜色