很久之前看过许世凯大大的博客看到过一篇PNG格式小图标的CSS任意颜色赋色技术，当时惊为天人，感慨还可以这样玩，私底下也曾多次想过有没有其他方法可以实现，又或者不仅仅局限于PNG图片。mix-blend-mode与background-blend-modemix-blend-mode在我之前的一篇文章初略介绍过—不可思议的混合模式mix-blend-mode，与本文的主角background-blend-mode一样，都是实现混合模式的。混合模式最常见于photoshop中，是PS中十分强大的功能之一。当然，瞎用乱用混合模式谁都会，利用混合模式将多个图层混合得到一个新的效果，只是要用到恰到好处，或者说在CSS中利用混合模式制作出一些效果则需要对混合模式很深的理解及不断的尝试。简单区分一下这两个属性：mix-blend-mode用于多个不同标签间的混合模式background-blend-mode用于单个标签间内背景图与渐变背景间的混合模式。background-blend-mode的可用取值与mix-blend-mode一样，不重复介绍，下面直接进入应用阶段。使用background-blend-mode:lighten实现任意图片颜色赋色技术OK，下面进入正文。如何通过纯CSS技术实现任意图片的任意颜色赋色技术呢？假设我们有这样一张图片，JPG、PNG、GIF都可以，但是有一个前提要求，就是黑色纯色，背景白色：利用background-blend-mode，我们可以在图片下叠加多一层其他颜色，通过background-blend-mode:lighten这个混合模式实现改变图片主体颜色黑色为其它颜色的目的。简单的CSS代码示意如下：.pic{width:px;height:px;background-image:url($img);background-size:cover;}.pic1{background-image:url($img),linear-gradient(#f00,#f00);background-blend-mode:lighten;background-size:cover;}效果如下：注意，上面CSS这一句是关键background-image:url($img),linear-gradient(#f00,#f00);，这里我叠加了一层渐变层linear-gradient(#f00,#f00)，实现了一个纯红色背景，而不是直接使用#f00实现红色背景。使用background-blend-mode:lighten实现主色改为渐变色这个方法更厉害的地方在于，不单单可以将纯色图片由一种颜色改为另一种颜色，而且可以将图片内的黑色部分由单色，改为渐变颜色！简单的CSS代码如下：.pic{background-image:url($img),linear-gradient(#f00,#00f);background-blend-mode:lighten;background-size:cover;}可以得到这样的效果：OK，看到这里，大家伙肯定会有疑问了，这是怎么实现的呢？这里就有必要解释一下lighten这个混合模式了。变亮，变亮模式与变暗模式产生的效果相反：用黑色合成图像时无作用，用白色时则仍为白色黑色比任何颜色都要暗，所以黑色会被任何色替换掉。反之，如果素材的底色是黑色，主色是白色。那就应该用变暗（darken）的混合模式CodePenDemo—纯色图片赋色技术尝试（
转载请注明：http://www.aierlanlan.com/rzdk/8037.html
