css代码实现控制图片颜色或者改变图片颜色

最新推荐文章于 2025-07-17 08:36:38 发布

清风明月的博客

最新推荐文章于 2025-07-17 08:36:38 发布

阅读量1.6w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： CSS/CSS3 文章标签： css

本文链接：https://blog.youkuaiyun.com/xiaoxia188/article/details/80985113

CSS/CSS3 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了CSS中背景混合模式的使用方法，并通过具体实例展示了如何利用不同的混合模式实现图片与纯色背景之间的视觉效果调整。特别关注了'lighten'和'darken'两种模式在实际场景中的应用。

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

1、黑色纯色，背景白色的图片

.pic1 {
    background-image: url($img), linear-gradient(#f00, #f00); //纯色渐变
    background-blend-mode: lighten;
    background-size: cover; //图片铺满屏幕
}
.pic3 {
    background-image: url($img), linear-gradient(#f00, #00f); //渐变色渐变
    background-blend-mode: lighten;
    background-size: cover; 
}