css如何改变图片颜色

601 阅读 0 评论 397 点赞

我是靠谱客的博主美好冬日，这篇文章主要介绍css如何改变图片颜色，现在分享给大家，希望可以做个参考。

本教程操作环境：windows7系统、css3版，DELL G3电脑。

css改变图片颜色的方法：

1、首先我们来了解一下mix-blend-mode 取值情况

这些大致和ps中一致，除了最后三个

2、利用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;
}1
2
3
4
5
6
7
8
9
10
11
.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如何改变图片颜色的详细内容，更多请关注靠谱客其它相关文章！