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

魔方编程

于 2019-08-19 17:00:31 发布

阅读量597

点赞数

CC 4.0 BY-SA版权

文章标签： css web前端前端开发前端工程师前端

本文链接：https://blog.csdn.net/wewfdf/article/details/99737887

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何通过纯 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($

最低0.47元/天解锁文章

200万优质内容无限畅学