web前端入门到实战：两行 CSS 代码实现图片任意颜色赋色技术

最新推荐文章于 2024-06-03 20:31:46 发布

原创

最新推荐文章于 2024-06-03 20:31:46 发布 · 650 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #web前端 #前端开发 #前端工程师 #前端

本文介绍了如何使用CSS的background-blend-mode: lighten属性，结合linear-gradient，实现任意图片的黑色部分变为任意颜色或渐变色的效果。这种方法适用于白色底色黑色主色的图片，对于透明底色的图片则不适用。文章还探讨了此技术的局限性和可能的拓展应用，如使用filter和mask等属性。

如何通过纯 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;
}
web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）

注意，上面 CSS 这一句是关键 background-image: url($img), linear-gradient(#f00, #f00); ，这里我叠加了一层渐变层 linear-gradient(#f00, #f00) ，实现了一个纯红色背景，而不是直接使用 #f00 实现红色背景。<

最低0.47元/天解锁文章