您的位置:首页 > Web前端 > CSS

两行 CSS 代码实现图片任意颜色赋色技术

2019-01-17 22:20 821 查看

如何通过纯 CSS 技术实现任意图片的任意颜色赋色技术呢?

使用 background-blend-mode: lighten 实现任意图片颜色赋色技术

假设我们有这样一张图片,JPG、PNG、GIF 都可以,但是有一个前提要求,就是黑色纯色,背景白色:

利用 background-blend-mode ,我们可以在图片下叠加多一层其他颜色,通过 background-blend-mode: lighten 这个混合模式实现改变图片主体颜色黑色为其它颜色的目的。

简单的 CSS 代码示意如下:

.pic {
width: 200px;
height: 200px;
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 这个混合模式了。变亮,变亮模式与变暗模式产生的效果相反:

1.用黑色合成图像时无作用,用白色时则仍为白色
2.黑色比任何颜色都要暗,所以黑色会被任何色替换掉。反之,如果素材的底色是黑色,主色是白色。那就应该用变暗(darken)的混合模式

``` html 原图 红色 灰色 渐变色 ``` ``` css $img: 'https://user-images.githubusercontent.com/8554143/34239266-232bdfc0-e641-11e7-8792-408782aaa78e.png'; .pic { width: 200px; height: 200px; margin: 50px; text-align: center; font-size: 42px; line-height: 420px; float: left; background-image: url($img); background-size: cover; } .pic1 { background-image: url($img), linear-gradient(#f00, #f00); background-blend-mode: lighten; background-size: cover; } .pic2 { background-image: url($img), linear-gradient(#333, #333); background-blend-mode: lighten; background-size: cover; } .pic3 { background-image: url($img), linear-gradient(#f00, #00f); background-blend-mode: lighten; background-size: cover; } ``` **局限性尝试 -- 使用透明底×××片** 上述方法要求了图片本身内容为纯色黑色,底色为白色。那么如果像 PNG 图片一样,只存在主色,而底色是透明的,是否能够同样实现效果呢? 假设我们有一张这样的 PNG 图片(灰色主色,透明底色): ![image](http://upload-images.jianshu.io/upload_images/13133049-0e593397cc32b305.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 按照上面的方式实现一遍,结果如下: ![image](http://upload-images.jianshu.io/upload_images/13133049-4f705a92dc83f8a5?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 很遗憾,当底色是透明的时候,会被混合模式混合上叠加层的颜色,无法使用。所有,这个技术也就存在了一个使用前提: 图片的底色为白色,主色为黑色 当然主色也可以是其他颜色,只是这个时候叠加需要考虑颜色的融合,没有使用黑色直观。 **background-blend-mode 实现图片任意颜色赋色技术总结** 综上,我们确实只需要两行代码就可以实现白色底色黑色主×××片的任意颜色赋色技术。 ``` { background-image: url($img), linear-gradient(#f00, #00f); background-blend-mode: lighten; } ``` 其中,background-image 的第二值就是你希望赋值给的渐变色(当然,渐变色可以生成纯色)。 我们同时给一个标签设置了背景图片和渐变色,然后利用了 background-blend-mode:lighten 这个关键属性,达到了类似 PS 里的混合模式效果。 看起来 background-blend-mode 名为混合模式,但似乎表现上更像是 PS 当中的一种的剪切蒙板,混合模式是修改图片本身,蒙版跟遮罩都是在图片上一层通过叠加其他层对图像进行调整。 那么由此方法本身可以想到,一些能对图形进行色彩调整的 CSS 属性是否也能达到同样的功能呢?诸如: - [ ] filter 滤镜 - [ ] mask-image - [ ] mask-clip 感兴趣的读者可以自行尝试,在接下来的文章我也会继续进行探讨。 黑色纯色,背景白色可能局限了这个技巧的使用场景,但是在很多白色底色的页面中,这个方法还是可以很好的发挥作用,许多 ICON 图片不再需要两个或者更多个颜色的版本! **background-blend-mode 兼容性** 相较于 mix-blend-mode,background-blend-mode 的兼容性会更好一点。所以本文所介绍的技术在移动端是存在用武之地的: ![image](http://upload-images.jianshu.io/upload_images/13133049-ef4ab2f4b6fb171f?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 最后 自己是一个五年的前端工程师 ![](https://s1.51cto.com/images/blog/201901/17/2bd7323f745841751a2898fdffbceb62.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=) 点击:[加入](http://u6.gg/ek2NA)
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  css css3 前端基础