[HTML/CSS/JS] css3实现背景图片颜色修改的多种方式

复制代码
<style>
.icon{
    display: inline-block;
    width: 180px;
    height: 180px;
    background: url('img/XXX.png') no-repeat center  cover;
    overflow: hidden;
}
.icon:after{
    content: '';
    display: block;
    height: 100%;
    transform: translateX(-100%);
    background: inherit;
    filter: drop-shadow(144px 0 0 #fff); //需要修改的颜色值
}
</style>
 
<i class="icon"></i>

复制代码
mix-blend-mode: normal; // 正常
mix-blend-mode: multiply; // 正片叠底
mix-blend-mode: screen; // 滤色
mix-blend-mode: overlay; // 叠加
mix-blend-mode: darken; // 变暗
mix-blend-mode: lighten; // 变亮
mix-blend-mode: color-dodge; // 颜色减淡
mix-blend-mode: color-burn; // 颜色加深
mix-blend-mode: hard-light; // 强光
mix-blend-mode: soft-light; // 柔光
mix-blend-mode: difference; // 差值
mix-blend-mode: exclusion; // 排除
mix-blend-mode: hue; // 色相
mix-blend-mode: saturation; // 饱和度
mix-blend-mode: color; // 颜色
mix-blend-mode: luminosity; // 亮度
mix-blend-mode: initial; // 默认
mix-blend-mode: inherit; // 继承
mix-blend-mode: unset; // 还原

复制代码
<style>
.icon{
    display: inline-block;
    width: 180px;
    height: 180px;
    background-image: url(说明：
       lighten这个混合模式：变亮、变亮模式与变暗模式产生的效果相反，黑色比任何颜色都要暗，所以黑色会被任何色替换掉。反之，如果素材的底色是黑色，主色是白色。那就应该用变暗（darken）的混合模式  。
       linear-gradient(#f00,  #00f )还可以实现渐变颜色的效果哦。 
[b]总结：[/b]
       方式一局限于png格式的图片，方式二不限制图片的格式。css3具有一定的兼容性。chrome、Firefo、移动端较为适合使用。

img/XXX.png'), linear-gradient(#f00, #f00);
    background-blend-mode: lighten;
    background-size: cover;
}
</style>
<i class="icon"></i>