css改变图片颜色的方法：1、使用【mix-blend-mode】方法进行取值；2、通过【background-blend-mode: lighten】这个混合模式实现改变图片主体颜色黑色为其它颜色的目的。
本教程操作环境：windows7系统、css3版，DELL G3电脑。
css改变图片颜色的方法：
1、首先我们来了解一下mix-blend-mode 取值情况
mix-blend-mode: normal; // 正常
立即学习“前端免费学习笔记（深入）”；
mix-blend-mode: multiply; // 正片叠底
mix-blend-mode: screen; // 滤色
mix-blend-mode: overlay; // 叠加
mix-blend-mode: darken; // 变暗
mix-blend-mode: lighten; // 变亮
mix-blend-mode: color-dodge; // 颜色减淡
mix-blend-mode: color-burn; // 颜色加深
mix-blend-mode: hard-light; // 强光
mix-blend-mode: soft-light; // 柔光
mix-blend-mode: difference; // 差值
mix-blend-mode: exclusion; // 排除
mix-blend-mode: hue; // 色相
mix-blend-mode: saturation; // 饱和度
mix-blend-mode: color; // 颜色
mix-blend-mode: luminosity; // 亮度
mix-blend-mode: initial; // 默认
mix-blend-mode: inherit; // 继承
mix-blend-mode: unset; // 还原
这些大致和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;}
相关免费学习推荐：javascript视频教程
以上就是css如何改变图片颜色的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1620028.html
微信扫一扫 
支付宝扫一扫 
